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

1，element 表格嵌入CheckBox

@H_304_7@效果图如下：

@H_360_18@ 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表格嵌入复选框以及单选框的方法介绍（代码示例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！