专做蔬菜水果的网站,手机网站切图,网上注册公司流程和费用标准,北京网站建设最新消息自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮
自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮
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
效果
