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表格嵌入复选框以及单选框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。