vue el-table 动态列 显示html标签内容

Posted on 2021-03-29 16:15  zkx4213  阅读(3186)  评论(0编辑  收藏  举报
<el-table @row-click="onRowClick" @selection-change="onSelectionChange" ref="testTable" :data="tableData" stripe :height="heightTable  + 'px'" style="width: 100%">
<template v-for="(item,index) in tableHead3">
<el-table-column :prop="item.column_name" :label="item.column_comment" v-html="item.column_name" :show-overflow-tooltip="true" align="center" :key="index" >
<template slot-scope="scope">
<span v-html="scope.row[scope.column.property]"></span>
<span v-html="scope.row[item.column_name]"></span>
</template>
</el-table-column>
</template>
</el-table>
export default {
name: 'Test',
data() {
return {
tableHead3:[{code: '<span style='color:#ff0000'>test1</span>'}, {code: '<span style='color:#ff0000'>test1</span>'}],
       tableData: []
}
}
}

  

Copyright © 2024 zkx4213
Powered by .NET 8.0 on Kubernetes