实现多选非常简单 : 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
<template>
<el-table
ref="multipleTable"
: data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@selection-change ="handleSelectionChange" >
<el-table-column
type="selection"
width="55" >
</el-table-column>
<el-table-column
label="日期"
width="120" >
<template slot-scope="scope" >{ { scope.row.date } } </template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120" >
</el-table-column>
<el-table-column
prop="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>