本篇文章给大家带来的内容是关于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: 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)       }     }   }

以上就是Element表格嵌入复选框以及单选框的方法介绍（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！