本篇文章给大家带来的内容是关于Element表格嵌入复选框以及单选框的方法介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1，element 表格嵌入CheckBox

效果图如下：

2，element结合checkBox实现单选效果如下：

html代码：

<template>
 <div>
 <p>shopInfo</p>
 <el-table
 ref="multipleTable"
 :data="tableData3"
 tooltip-effect="dark"
 highlight-current-row // element-UI提供的单选方法,可以使当前选中行高亮
 style="width: 100%"
 @current-change="handleSelectionChange"> // 单选方法,返回选中的表格行
 <el-table-column
 label="操作"
 width="55">
 <template slot-scope="scope">
 <el-checkbox v-model="scope.row.checked"></el-checkbox> // 添加一个多选框,控制选中与否
 </template>
 </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>
 </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: ,
 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)
 }
 }
 }