贵阳两学一做网站,做个网站需要哪些东西,合肥高端网站建设设计公司,网站模板的好处自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮
自定义表格的表头根据后端的数据进行筛选是否进行自定义表头添加按钮
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
效果
