首页 >> js开发 >> jsant design vue中表格指定格式渲染方式js大全
jsant design vue中表格指定格式渲染方式js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别渲染方法1:渲染方法1:指定渲染函数:
const columns = [
{
title: '排名',
dataIndex: 'key',
customRender: renderContent // 渲染函数的规则
}, {
title: '搜索关键词',
dataIndex: 'keyword',
customRender: (text, row, index) => {
if (index < 4) { // 前4行数据以a标签的形式被渲染
return {text}
}
return { // 否则以独占4列的文本形式被渲染
children: text,
attrs: {
colSpan: 4
}
}
}
}
]
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
return obj
}
const columns = [
{
title: '排名',
dataIndex: 'key',
customRender: renderContent // 渲染函数的规则
}, {
title: '搜索关键词',
dataIndex: 'keyword',
customRender: (text, row, index) => {
if (index < 4) { // 前4行数据以a标签的形式被渲染
return {text}
}
return { // 否则以独占4列的文本形式被渲染
children: text,
attrs: {
colSpan: 4
}
}
}
}
]
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
return obj
}渲染方法2:渲染方法2:直接调用对应插槽模板:
项目进度
质量管控
运维监控
{{text}}
const columns = [
{
title: '编号',
dataIndex: 'number',
customRender: renderContent
}, {
title: '项目名称',
dataIndex: 'name',
customRender: (text, row, index) => {
return {
children: {text},
attrs: {}
}
}
}, {
title: '项目进度',
dataIndex: 'progress',
scopedSlots: { customRender: 'progress' } // 模板中对应的slot-scope可以用来传递参数,其中第一个参数是当前字段对应的值progress,第二个参数是当前字段对应的所有值对象,即整个data[n]
}, {
title: '操作',
dataIndex: 'operate',
scopedSlots: { customRender: 'operation' } // 直接对应插槽名为operation的模板
}
]
const data = [
{
key: 6,
number: 6,
name: '雅典娜',
progress: '88%',
progressstatus: 1
}
]
项目进度
质量管控
运维监控
{{text}}
const columns = [
{
title: '编号',
dataIndex: 'number',
customRender: renderContent
}, {
title: '项目名称',
dataIndex: 'name',
customRender: (text, row, index) => {
return {
children: {text},
attrs: {}
}
}
}, {
title: '项目进度',
dataIndex: 'progress',
scopedSlots: { customRender: 'progress' } // 模板中对应的slot-scope可以用来传递参数,其中第一个参数是当前字段对应的值progress,第二个参数是当前字段对应的所有值对象,即整个data[n]
}, {
title: '操作',
dataIndex: 'operate',
scopedSlots: { customRender: 'operation' } // 直接对应插槽名为operation的模板
}
]
const data = [
{
key: 6,
number: 6,
name: '雅典娜',
progress: '88%',
progressstatus: 1
}
]补充知识:Ant design vue框架,table控件中customRow用法的一个坑补充知识:补充知识:Ant design vue框架,table控件中customRow用法的一个坑今天在写代码时,用到Ant design框架中的控件,其中的一个需求是:点击table中的一行,需要执行一些操作。因为没有默认的行点击事件,需要用到customRow来进行自定义。这个方法,在官方的文档中,有使用说明,如下:
customRow={(record) => { customRow={(record) => {
const columns = [
{
title: '排名',
dataIndex: 'key',
customRender: renderContent // 渲染函数的规则
}, {
title: '搜索关键词',
dataIndex: 'keyword',
customRender: (text, row, index) => {
if (index < 4) { // 前4行数据以a标签的形式被渲染
return {text}
}
return { // 否则以独占4列的文本形式被渲染
children: text,
attrs: {
colSpan: 4
}
}
}
}
]
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
return obj
}
const columns = [
{
title: '排名',
dataIndex: 'key',
customRender: renderContent // 渲染函数的规则
}, {
title: '搜索关键词',
dataIndex: 'keyword',
customRender: (text, row, index) => {
if (index < 4) { // 前4行数据以a标签的形式被渲染
return {text}
}
return { // 否则以独占4列的文本形式被渲染
children: text,
attrs: {
colSpan: 4
}
}
}
}
]
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
return obj
}渲染方法2:渲染方法2:直接调用对应插槽模板:
项目进度
质量管控
运维监控
{{text}}
const columns = [
{
title: '编号',
dataIndex: 'number',
customRender: renderContent
}, {
title: '项目名称',
dataIndex: 'name',
customRender: (text, row, index) => {
return {
children: {text},
attrs: {}
}
}
}, {
title: '项目进度',
dataIndex: 'progress',
scopedSlots: { customRender: 'progress' } // 模板中对应的slot-scope可以用来传递参数,其中第一个参数是当前字段对应的值progress,第二个参数是当前字段对应的所有值对象,即整个data[n]
}, {
title: '操作',
dataIndex: 'operate',
scopedSlots: { customRender: 'operation' } // 直接对应插槽名为operation的模板
}
]
const data = [
{
key: 6,
number: 6,
name: '雅典娜',
progress: '88%',
progressstatus: 1
}
]
项目进度
质量管控
运维监控
{{text}}
const columns = [
{
title: '编号',
dataIndex: 'number',
customRender: renderContent
}, {
title: '项目名称',
dataIndex: 'name',
customRender: (text, row, index) => {
return {
children: {text},
attrs: {}
}
}
}, {
title: '项目进度',
dataIndex: 'progress',
scopedSlots: { customRender: 'progress' } // 模板中对应的slot-scope可以用来传递参数,其中第一个参数是当前字段对应的值progress,第二个参数是当前字段对应的所有值对象,即整个data[n]
}, {
title: '操作',
dataIndex: 'operate',
scopedSlots: { customRender: 'operation' } // 直接对应插槽名为operation的模板
}
]
const data = [
{
key: 6,
number: 6,
name: '雅典娜',
progress: '88%',
progressstatus: 1
}
]补充知识:Ant design vue框架,table控件中customRow用法的一个坑补充知识:补充知识:Ant design vue框架,table控件中customRow用法的一个坑今天在写代码时,用到Ant design框架中的控件,其中的一个需求是:点击table中的一行,需要执行一些操作。因为没有默认的行点击事件,需要用到customRow来进行自定义。这个方法,在官方的文档中,有使用说明,如下: