1，element?表格嵌入CheckBox
效果圖如下：
?2，element結合checkBox實現單選效果如下：
html代碼：
<template><div><p>shopInfo</p><el-tableref="multipleTable":data="tableData3"tooltip-effect="dark"highlight-current-row // element-UI提供的單選方法,可以使當前選中行高亮style="width: 100%"@current-change="handleSelectionChange"> // 單選方法,返回選中的表格行<el-table-columnlabel="操作"width="55"><template slot-scope="scope"><el-checkbox v-model="scope.row.checked"></el-checkbox> // 添加一個多選框,控制選中與否</template></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></template> ?js代碼：
?
export default {name: 'shopInfo',data () {return {tableData3: []}},created () {this.setTable()},methods: {setTable () {let resdata = [{id: 44,date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {id: 89,date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {id: 23,date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {id: 88,date: '2016-05-07',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}]// 后臺數據返回后,手動添加一個checked屬性控制選中與否resdata.forEach(item => {item.checked = false})this.tableData3 = resdata},handleSelectionChange (row) {this.tableData3.forEach(item => {// 排他,每次選擇時把其他選項都清除if (item.id !== row.id) {item.checked = false}})console.log(row)}}}
)
