ant design vue中表格指定格式渲染

注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别

渲染方法1：

指定渲染函数：

const columns = [{title: '排名',dataIndex: 'key',customRender: renderContent // 渲染函数的规则}, {title: '搜索关键词',dataIndex: 'keyword',customRender: (text, row, index) => {if (index < 4) { // 前4行数据以a标签的形式被渲染return <1>}return { // 否则以独占4列的文本形式被渲染children: text,attrs: {colSpan: 4}}}}
]
const renderContent = (value, row, index) => {const obj = {children: value,attrs: {}}return obj
}

渲染方法2：

直接调用对应插槽模板：

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}
]

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！