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)}}}

轉載于:https://www.cnblogs.com/lgnblog/p/10670281.html

總結

以上是生活随笔為你收集整理的Element表格嵌入复选框以及单选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。