核心是使用v-if控制列的显隐
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<template> <div> <div v-for="(item, index) in tables" :key="index"> <el-table :data="item.data" @filter-change="value => filterChange(value,index, 'tables')" :span-method="value => cellMerge(value,'tables')" :header-cell-style="{background:'#fbfbfb'}" size="mini" doLayout border > <el-table-column v-for="(ele,index) in item.columns" :label="ele.text" :prop="ele.value" show-overflow-tooltip v-if="ele.flag" :key="ele.value + index" :resizable="false" > <template slot-scope="scope"> <span>{{scope.row[scope.column.property]}}</span> </template> </el-table-column> <el-table-column :key="item.columns.length + 1" fixed="right" width="50" v-if="item.stash_columns" :filters="item.stash_columns" :filtered-value="item.filter_value" :resizable="false" > <template slot="header" slot-scope="scope"> <i class="el-icon-menu" style="cursor: pointer"></i> </template> </el-table-column> </el-table> </div> </div> </template> <script> export default { data () { return { tables: [ { data: [], columns: [ { text: '滴滴', value: 'didi', flag: true }, { text: '哒哒', value: 'dada', flag: true }, { text: '嘿嘿', value: 'heihei', flag: true }, { text: '哈哈', value: 'haha', flag: false } ] } ] } }, methods: { // 处理数据 handlerData (type) { const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}] const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { this.$set(this[type][index], 'data', data) this.$set(this[type][index], 'stash_columns', item.columns) this.$set(this[type][index], 'filter_value', []) const columns = item.stash_columns const filter_value = item.filter_value columns && columns.length > 0 && columns.map((ele, idx) => { if (ele.flag) { filter_value.push(ele.value) } }) this.$set(this[type][index], 'filter_value', filter_value) }) }, // 控制列显隐 filterChange (value, idx, type) { switch (type) { case type: for (const ele in value) { this.$set(this[type][idx], 'show_columns', value[ele]) } const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { const columns = item.columns const show_columns = item.show_columns if (show_columns && show_columns.length > 0) { columns && columns.length > 0 && columns.map((val, key) => { this.$set(this[type][index].columns[key], 'flag', false) show_columns.map((ele) => { if (val.value === ele) { this.$set(this[type][index].columns[key], 'flag', true) } }) }) } }) break default: break } }, // 合并单元格 cellMerge ({row, column, rowIndex, columnIndex}, type) { this.$nextTick(() => { const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { const show_columns = item.show_columns const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length if (columnIndex === length - 1) { return [1, 0] } else if (columnIndex === length) { return [0, 0] } }) }) } }, mounted () { this.handlerData('tables') } } </script> |
