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

Posted on 2021-03-29 16:15  zkx4213  阅读(3466)  评论(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: []
}
}
}

  

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3