Vue2.x + Element table 多列选中、批量选中

需求分享：
在table中可以对多列进行多选，单选操作。看了selection部分并不支持在table中的多列操作，所以我用了取巧的方式：自己定义多个类型为type="selection"的列，并绑定不同的模型。

效果图：

1.Css样式设置

<style scoped>
/*!*透明化整体*!*/
.el-table, .el-table__expanded-cell {
    background-color: transparent !important;
    /*background-color: #00FFBD;*/
}
/*!*!*透明化行、单元格*!*!*/
.el-table th, .el-table tr, .el-table td {
    background-color: transparent !important;
    /*background-color: #00FFBD;*/
}

/*!*!*hover时样式*!*!*/
/*.el-table tbody tr:hover>td {*/
/*  background-color: red !important*/
/*}*/

.el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: #1e4ccc;
}

.el-table--border,
.el-table--group {
    border-color: #1e4ccc;
}
.el-table td,
.el-table th.is-leaf {
    border-bottom: 1px solid #1e4ccc;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid #1e4ccc;
}

.el-table--border td,
.el-table--border th {
    border-right: 1px solid #1e4ccc;
}
</style>
<template>
    <div style="width: 100%; min-height: 600px;">
             <el-row>
                    <el-col :span="12">
                        <el-table border ref="awareTable" :data="tableData" tooltip-effect="dark" height="580"
                                  style="width: 100%; overflow: visible !important;" @selection-change="awareTerminalSelectionChange">
                            <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
                            <el-table-column align="center" prop="name" label="数据项配置"></el-table-column>
                            <el-table-column align="center" label="总出线、表箱进线">
                                <el-table-column align="center" width="240" type="selection"></el-table-column>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="6">
                        <el-table border ref="switchTable" :data="tableData" tooltip-effect="dark" height="580"
                                  style="width: 100%; overflow: visible !important; " @selection-change="switchSelectionChange">
                            <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
                            <el-table-column align="center" label="智能开关" width="100%">
                                <el-table-column align="center" type="selection" width="285"></el-table-column>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="6">
                        <el-table border ref="meterTable" :data="tableData" tooltip-effect="dark" height="580"
                                  style="width: 100%; overflow: visible !important;" @selection-change="meterSelectionChange">
                            <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
                            <el-table-column align="center" label="电表">
                                <el-table-column align="center" type="selection" width="285"></el-table-column>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
        </el-row>

    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            // 脱敏的测试数据，可直接运行查看效果
            tableData: [
              {"id":"1","name":"苹果"},
              {"id":"2","name":"香蕉"},
              {"id":"3","name":"西瓜"},
              {"id":"4","name":"柚子"},
              {"id":"5","name":"手机"},
              {"id":"6","name":"手表"},
              {"id":"7","name":"电脑"},
              {"id":"8","name":"台灯"},
              {"id":"9","name":"冰箱"},
             ],
            awareSelection: [],
            switchSelection: [],
            meterSelection: []
        }
    },
    mounted () {
        // 后台加载tableData数据。
        this.loadTableData()
    },
    methods: {
        loadTableData () {
            axios.get('/api/getDataDi').then((resp) => {
                this.tableData = resp.data.data
               // 表格数据加载完成后，对选中数据进行渲染。重点部分！
                this.$nextTick(function () {
                    this.handleCheckTable()
                })
            }).catch((e) => {
                this.$message.error(e.response.message);
            })
        },
        awareTerminalSelectionChange (val) {
            this.awareSelection = val
        },
        switchSelectionChange (val) {
            this.switchSelection = val
        },
        meterSelectionChange(val) {
            this.meterSelection = val
        },
        saveDataDi () {
          // 将三个表格的结果提交保存
            let param = {
                'awareSelection': this.awareSelection,
                'switchSelection': this.switchSelection,
                'meterSelection': this.meterSelection
            }
            axios.post('/api/saveDataDi', param).then((resp) => {
                this.$message.info(resp.message);
            }).catch((e) => {
                this.$message.error(e.response.message);
            })
        },
        handleCheckTable(){
            let table = this.tableData
            table.forEach(item => {
                // toggleRowSelection可以切换表格行的选中状态,接收两个参数第一个是要切换的行,这里需要的对象格式,
                // 第二个参数是设置选中还是不选中,不传的话会取与原来相反的选择状态
                // 方法调用要等元素挂载后才能执行,这里加一个判断,这个方法要放在数据获取后
                if (item.meter === 1) {
                    this.$refs.meterTable && this.$refs.meterTable.toggleRowSelection(item, true)
                }
                if (item.awareTerminal === 1) {
                    this.$refs.awareTable && this.$refs.awareTable.toggleRowSelection(item, true)
                }
                if (item.smartSwitch === 1) {
                    this.$refs.switchTable && this.$refs.switchTable.toggleRowSelection(item, true)
                }
            })
        }
    }
}
</script>