vue使用render函数渲染table表格某一列的数组数据

vue使用render函数渲染table表格某一列的数组数据

当所需要渲染的表格数据是一个数组类型的数据时，可以使用render函数，如下所示：

1.先在需要显示的表头中写出关键字

<Table :columns="columns1" :data="currentUserList"></Table>

2.js文件中

return {
	columns1: [
                    {
                        title: '账号',
                        key: 'userName',
                        align: 'center'

                    },
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '服务范围',
                        ellipsis: true, 
                        key: 'roleIds',
                        align: 'center'
                     }
           ]

3.在需要渲染数组的键值下加入render函数

{
       title: '服务范围',
       ellipsis: true, 
       key: 'roleIds',
       align: 'center',
       render: (h,params) => {
           return h('span',{
               style: {
                   display: 'inline-block',
                   width: '100%',
                   margin: '10px',
                   overflow: 'hidden',
                   textOverflow: 'hiddden',
                   // color: "red"
               }
           },params.row.roleIds.join('\n'))
       }        
   }

显示结果如下图所示：

本文属于原创，转载请附上原文地址连接