您的位置 首页 html教程

Element表格嵌入复选框以及单选框的方法介绍(代码示例)

本篇文章给大家带来的内容是关于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表格嵌入复选框以及单选框的方法介绍(代码示例)的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:Element表格嵌入复选框以及单选框的方法介绍(代码示例)

文章地址:https://www.pyhw.net/32114_element%e8%a1%a8%e6%a0%bc%e5%b5%8c%e5%85%a5%e5%a4%8d%e9%80%89%e6%a1%86%e4%bb%a5%e5%8f%8a%e5%8d%95%e9%80%89%e6%a1%86%e7%9a%84%e6%96%b9%e6%b3%95%e4%bb%8b%e7%bb%8d%ef%bc%88%e4%bb%a3%e7%a0%81%e7%a4%ba.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图