el-table 手动选择展示列（二）

需求同 el-table 手动选择展示列（一） 是一样的，只是换了一种写法：

【为了避免 v-for 和 v-if 不同时使用，则使用了computed方法来更新表格字段的显示与隐藏】

【 利用 <template slot-scope="scope"> 对表格数据进行 format 格式化显示 】

<el-table :data="tableData" ref="multipleTable" class="table-container" stripe height="600" v-loading="listLoading">
    <el-table-column width="80" align="left" label="序号">
        <template slot-scope="scope">
            <span>{{columnIndex(scope.$index)}}</span>
        </template>
    </el-table-column>
    <el-table-column align="left" v-for="(col, index) in showColumns" :key="index" :label="col.label" :prop="col.prop" :min-width="col.minWidth" show-overflow-tooltip>
        <template slot-scope="scope">
            <div v-if="col.prop == 'urbanDisAmt'">
                <span v-html="formatUrbanDisAmt(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'suburbDisAmt'">
                <span v-html="formatSuburbDisAmt(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'countWalletUseFlag'">
                <span v-html="formatCountWalletUseFlag(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'swipeInterval'">
                <span v-html="formatSwipeInterval(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'isTransfer'">
                <span v-html="formatTransfer(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'cardModel'">
                <span v-html="formatCardModel(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'txnType'">
                <span v-html="formatTxnType(scope.row)"></span>
            </div>
            <div v-else-if="col.prop == 'corpId'">
                <span v-html="formatCorp(scope.row)"></span>
            </div>
            <!-- <div v-else-if="col.prop == 'merchantNo'">
                <span v-html="formatMerchant(scope.row)"></span>
            </div> -->
            <div v-else>
                {{ scope.row[scope.column.property] }}
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="100" fixed="right">
        <template slot="header" slot-scope="scope">
            <el-popover id="tablePopover" width="200" popper-class="tablePopover" trigger="manual" ref="tablePopover" v-model="popoverVisible" @show="showPopover">
                <span slot="reference" @click="openPopover">操作<i class="el-icon-arrow-down" style="font-weight: bold;" /></span>
                <div class="popoverCheckBoxArea">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 10px 0;"></div>
                    <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange">
                        <el-checkbox v-for="column in columns" :label="column.prop" :key="column.prop">{{column.label}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="popoverCheckBoxButton">
                    <el-button size="mini" @click="canclePopover">取消</el-button>
                    <el-button type="primary" size="mini" @click="confirmPopover">确定</el-button>
                </div>
            </el-popover>
        </template>
        <template slot-scope="scope">
            <el-button class="blue-text-btn" type="text" size="large" @click="updateInfo(scope.row)">编辑</el-button>
            <el-button class="red-text-btn" type="text" size="large" @click="deleteInfo(scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

// data中定义的变量
listLoading: false,
tableData: [],
// 选择展示的字段数组
columns: [
    { label: '主卡类型', prop: 'mainCardType', minWidth: '100', show: true },
    { label: '主卡类型名称', prop: 'mainCardTypeName', minWidth: '150', show: true },
    { label: '市区刷卡优惠比例', prop: 'urbanDisRatio', minWidth: '150', show: true },
    { label: '市区刷卡优惠金额', prop: 'urbanDisAmt', minWidth: '150', show: true },
    { label: '郊区刷卡优惠比例', prop: 'suburbDisRatio', minWidth: '150', show: true },
    { label: '郊区刷卡优惠金额', prop: 'suburbDisAmt', minWidth: '180', show: true },
    { label: '是否支持计次消费', prop: 'countWalletUseFlag', minWidth: '150', show: true },
    { label: '刷卡间隔', prop: 'swipeInterval', minWidth: '100', show: true },
    { label: '是否参与换乘优惠', prop: 'isTransfer', minWidth: '150', show: true },
    { label: '卡型', prop: 'cardModel', minWidth: '100', show: true },
    { label: '语音索引号', prop: 'voiceIndex', minWidth: '150', show: true },
    { label: '语音内容', prop: 'voiceTxt', minWidth: '120', show: true },
    { label: '消费类型', prop: 'txnType', minWidth: '120', show: true },
    // { label: '城市代码', prop: 'cityCode', minWidth: '120', show: true },
    { label: '子卡类型', prop: 'childCardType', minWidth: '120', show: true },
    { label: '子卡类型名称', prop: 'childCardTypeName', minWidth: '150', show: true },
    { label: '线路编号', prop: 'lineNo', minWidth: '120', show: true },
    { label: '运营单位', prop: 'corpId', minWidth: '120', show: true },
    // { label: '商户', prop: 'merchantNo', minWidth: '120', show: true },
    { label: '创建时间', prop: 'createTime', minWidth: '120', show: true }
],
popoverVisible: false,
checkAll: true,
checkedColumns: [],
isIndeterminate: false,

computed: {
    // 表格展示的字段列 
    showColumns() {
        let result = [];
        this.columns.map(item => {
            if(item.show) {
                result.push(item);
            }
        })
        return result;
    }
},

// -------------------------- Popover相关方法 START -------------------------
// 点击“操作”打开菜单选择框
openPopover() {
    this.popoverVisible = true;
    // 去掉第二个popover弹框（修改问题：使用fixed固定列后popover会出现两个）
    this.$nextTick(() => {
        document.getElementsByClassName('tablePopover')[1].style.display = 'none';
    })
},
// 弹出框打开时触发
showPopover() {
    // 选中目前已展示的字段值
    this.checkedColumns = [];
    this.columns.map(item => {
        if(item.show) {
            this.checkedColumns.push(item.prop);
        }
    });
    // 如果目前展示的是全部字段，则需要勾选上“全选”按钮
    if(this.columns.length == this.checkedColumns.length) {
        this.checkAll = true;
        this.isIndeterminate = false;
    }
    // 重新渲染表格
    this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();
    })
},
// 点击弹出框的“全选”按钮
handleCheckAllChange(val) {
    let columnsPropList = [];
    this.columns.map(item => columnsPropList.push(item.prop));
    this.checkedColumns = val ? columnsPropList : [];
    this.isIndeterminate = false;
},
// 点击弹出框的选择展示菜单的复选框
handleCheckedColumnsChange(value) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === this.columns.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
},
// 点击弹出框的“取消”按钮
canclePopover() {
    this.popoverVisible = false;
    // this.$refs.tablePopover.doClose();
},
// 点击弹出框的“确定”按钮
confirmPopover() {
    if(this.checkedColumns.length == 0) {
        this.$message({
            message: '请选择需要展示的表格字段',
            center: true,
            customClass: 'message-error'
        });
        return;
    }
    // 根据选择结果，遍历修改列是否展示的属性值
    this.columns.forEach(item => {
        if(this.checkedColumns.some(el => el == item.prop)) {
            item.show = true;
        } else {
            item.show = false;
        }
    })
    this.popoverVisible = false;
    // this.$refs.tablePopover.doClose();
    // 重新渲染表格
    this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();
    })
},
// -------------------------- Popover相关方法 END -------------------------

// 格式化数据显示：市区刷卡优惠金额： 元 -> 分
formatUrbanDisAmt(row) {
    return row.urbanDisAmt / 100 + '元';
},
// 格式化数据显示：郊区刷卡优惠金额： 元 -> 分
formatSuburbDisAmt(row) {
    return row.suburbDisAmt / 100 + '元';
},
// 格式化数据显示：刷卡间隔：毫秒
formatSwipeInterval(row) {
    return row.swipeInterval + '毫秒';
},
// 格式化数据显示：消费类型： 0000 金额，0001 计次，还可自定义添加
formatTxnType(row) {
    return row.txnType == '0000' ? '金额' : '计次';
},
// 格式化数据显示：卡型： 01 CPU卡，02 M1卡
formatCardModel(row) {
    return row.cardModel == '01' ? 'CPU卡' : 'M1卡';
},
// 格式化数据显示：是否支持计次消费： 00 不支持计次，01优先扣次
formatCountWalletUseFlag(row) {
    return row.countWalletUseFlag == '00' ? '不支持计次' : '优先扣次';
},
// 格式化数据显示：是否参与换乘优惠： 00 不参与，01参与
formatTransfer(row) {
    return row.isTransfer == '00' ? '不参与' : '参与';
},
// 格式化数据显示：运营单位名称
formatCorp(row) {
    return this.corpIdList.find(item => item.value == row.corpId).label;
},
// 格式化数据显示：商户名称
formatMerchant(row) {
    return this.merchantNoList.find(item => item.value == row.merchantNo).label;
},

<style lang="scss" scoped>
    .tablePopover {
        .popoverCheckBoxArea {
            padding: 10px 20px 0 20px;
            margin-bottom: 10px;
            max-height: 600px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .popoverCheckBoxButton {
            text-align: center;
            padding-bottom: 10px;
        }
    }
</style>