在使用ElementUI,需要ElementUI表格table组件实现单选及禁用默认选中效果,
先看下效果图:
代码如下:
<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@row-click="rowClick" @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></template><script>export default {data() {return {selected:'',//选中的名字tableData: [{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: {//点击行rowClick(row, column, event){this.$refs.multipleTable.toggleRowSelection(row);},//改变时handleSelectionChange(val){if (val.length > 1){this.$refs.multipleTable.clearSelection()this.$refs.multipleTable.toggleRowSelection(val.pop())console.log("handleSelectionChange1:",val)}else{if(val.length==1)this.selected = val[0].name}if(val.length==0)this.selected = '';}}}
</script>