网站服务公司人工成本进什么费用,柳州住房城乡建设厅官方网站,百度站长工具是什么意思,阿里云域名如何做网站自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮
自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮
templatediv classboxel-table :datamsgMapList border classtabletemplatediv classboxel-table :datamsgMapList border classtableel-table-column v-forcolumn in titleMapList :keycolumn.code :propcolumn.propFlag :labelcolumn.valuetemplate #header{ column }divspan{{ column.label }}/spanbutton v-ifcolumn.property 1按钮/button/div/templatetemplate #default{ row }div :classgetColumnStyle(column, row){{ row[column.code] }}/div!-- divv-ifcolumn.symbol 1:classrow[column.compareOne] row[column.compareTwo]? column.class: {{ row[column.code] }}/div --/template/el-table-column/el-table/div
/templatescript
export default {props: {titleMapList: {type: Array,},msgMapList: {type: Array,},type: {type: String,},},data() {return {mainSource: ,};},mounted() {this.titleMapList.forEach((item) {if (item.isMain 1) {this.mainSource item.code;return;}});},methods: {getColumnStyle(column, row) {console.log(this.type------, this.type);if (this.type 2) {// 变色 居右if (column.colorFlag 1 row[column.code] ! row[this.mainSource]) {return color-class table-left;}// 不变色 居右if (column.isMain 1 || column.colorFlag 1) {return table-left;}} else {if (column.colorFlag 1) {if (row[column.code] ! row[this.mainSource]) {return color-class; //color-class}}}},},
};
/script注意表头插槽拿到的column 和内容插槽拿到的内容不一致header插槽的label对应el-table-column的labelprop对应header插槽的property
效果
