<template>
? ? <div class="page">
? ? ? ? <el-popover width="60" trigger="click">
? ? ? ? ? ? <el-checkbox-group v-model="columnSelecteds">
? ? ? ? ? ? ? ? <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title" ></el-checkbox> ? ?
? ? ? ? ? ? </el-checkbox-group>
? ? ? ? ? ? <el-button slot="reference" icon="el-icon-more" circle style="margin-left: 100px;"></el-button>
? ? ? ? </el-popover>
? ? ? ? <el-table
? ? ? ? ? ? :data="tableData"
? ? ? ? ? ? ref="dataTable"
? ? ? ? ? ? stripe
? ? ? ? ? ? style="width: 100%">
? ? ? ? ? ? <el-table-column v-if="columnHeaders[0].isShow" prop="date" label="日期"></el-table-column>
? ? ? ? ? ? <el-table-column v-if="columnHeaders[1].isShow" prop="name" label="姓名"></el-table-column>
? ? ? ? ? ? <el-table-column v-if="columnHeaders[2].isShow" prop="address" label="地址"></el-table-column>
? ? ? ? </el-table>
? ? </div>
</template>

<script>
export default {
? ? name: 'ElTableTest',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 表格數(shù)據(jù)
? ? ? ? ? ? tableData: [{
? ? ? ? ? ? ? ? date: '2016-05-02',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-04',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-01',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? date: '2016-05-03',
? ? ? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1516 弄'
? ? ? ? ? ? }],
? ? ? ? ? ? //表頭信息
? ? ? ? ? ? columnHeaders: [?
? ? ? ? ? ? ? ? {index: 0, title: "日期", isShow: true},
? ? ? ? ? ? ? ? {index: 1, title: "姓名", isShow: true},
? ? ? ? ? ? ? ? {index: 2, title: "地址", isShow: true}
? ? ? ? ? ? ], ?
? ? ? ? ? ? //已選擇的項
? ? ? ? ? ? columnSelecteds: ["日期","姓名", "地址"]?
? ? ? ? } ??
? ? },
? ? watch: {
? ? ? ? /**
? ? ? ? ?* @title 監(jiān)聽列顯示隱藏
? ? ? ? ?*/
? ? ? ? columnSelecteds(newArrayVal) {
? ? ? ? ? ? // 計算為被選中的列標題數(shù)組
? ? ? ? ? ? var nonSelecteds = this.columnHeaders
? ? ? ? ? ? ? ? ? ? ? ? .filter(item => newArrayVal.indexOf(item.title) == -1)?
? ? ? ? ? ? ? ? ? ? ? ? .map(item => item.title)
? ? ? ? ? ? // 根據(jù)計算結(jié)果進行表格重繪
? ? ? ? ? ? this.columnHeaders.filter(item => {
? ? ? ? ? ? ? ? let isNonSelected = nonSelecteds.indexOf(item.title) != -1
? ? ? ? ? ? ? ? if (isNonSelected) {
? ? ? ? ? ? ? ? ? ? // 隱藏未選中的列
? ? ? ? ? ? ? ? ? ? item.isShow = false
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.dataTable.doLayout()
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 顯示已選中的列
? ? ? ? ? ? ? ? ? ? item.isShow = true
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.dataTable.doLayout()
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>