element-ui动态设置el-table-column，同时使用formatter和slot

最新推荐文章于 2024-07-26 08:15:00 发布

rogerwang@f2e

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量3.9k

点赞数 1

文章标签： vue elementui

本文链接：https://blog.csdn.net/RogerWang_H5/article/details/113242333

版权

element-ui动态设置el-table-column，并同时使用formatter和slot

模板渲染

<el-table-column
    v-for="(row, index) in tableColumns"
    :key="index"
    :label="row.label"
    :prop="row.key"
>
    <template slot-scope="scope">
        <span>{{ row.formatter ? row.formatter(scope.row) : scope.row[row.key] }}</span>
    </template>
</el-table-column>

表头数据

const tableColumns = [
	{
	    key: 'user',
	    label: '用户'
	}, {
	    key: 'date',
	    label: '日期',
	    formatter: (row) => {
	        const pattern = /(\d{4})(\d{2})(\d{2})/
	        return row.date ? row.date.replace(pattern, '$1-$2-$3') : ''
	    }
	}
]