實現多選非常簡單: 手動添加一個el-table-column，設type屬性為selection即可；默認情況下若內容過多會折行顯示，若需要單行顯示可以使用show-overflow-tooltip屬性，它接受一個Boolean，為true時多余的內容會在 hover 時以 tooltip 的形式顯示出來。<template><el-tableref="multipleTable":data="tableData3"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切換第二、第三行的選中狀態</el-button><el-button @click="toggleSelection()">取消選擇</el-button></div>
</template><script>export default {data() {return {tableData3: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],multipleSelection: []}},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;}}}
</script>