Element表格嵌入复选框以及单选框的方法介绍（代码示例）<span style="font-size: 18px;">1，element 表格嵌入CheckBox<span

概述Element表格嵌入复选框以及单选框的方法介绍（代码示例）<span style="font-size: 18px;">1，element 表格嵌入CheckBox</span><span style="font-size: 16px;">效果图如下：</span>

本篇文章给大家带来的内容是关于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表格嵌入复选框以及单选框的方法介绍（代码示例）<span style="font-size: 18px;">1，element 表格嵌入CheckBox</span><span style="font-size: 16px;">效果图如下：</span>全部内容，希望文章能够帮你解决Element表格嵌入复选框以及单选框的方法介绍（代码示例）<span style="font-size: 18px;">1，element 表格嵌入CheckBox</span><span style="font-size: 16px;">效果图如下：</span>所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。