Introduction to the method of embedding check boxes and radio buttons in Element tables (code example)

不言

Release： 2019-04-12 11:50:20

forward

8518 people have browsed it

This article brings you an introduction to the method of embedding check boxes and radio buttons in Element tables (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

1, element table embedded in CheckBox

The rendering is as follows:

2. Element combined with checkBox achieves the single selection effect as follows:

##html code:

<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>

Copy after login

js code:

export default {
    name: &#39;shopInfo&#39;,

    data () {
      return {
        tableData3: []
      }
    },

    created () {
      this.setTable()
    },

    methods: {
      setTable () {
        let resdata = [{
          id: 44,
          date: &#39;2016-05-03&#39;,
          name: &#39;王小虎&#39;,
          address: &#39;上海市普陀区金沙江路 1518 弄&#39;
        }, {
          id: 89,
          date: &#39;2016-05-02&#39;,
          name: &#39;王小虎&#39;,
          address: &#39;上海市普陀区金沙江路 1518 弄&#39;
        }, {
          id: 23,
          date: &#39;2016-05-04&#39;,
          name: &#39;王小虎&#39;,
          address: &#39;上海市普陀区金沙江路 1518 弄&#39;
        }, {
          id: 88,
          date: &#39;2016-05-07&#39;,
          name: &#39;王小虎&#39;,
          address: &#39;上海市普陀区金沙江路 1518 弄&#39;
        }]
        // 后台数据返回后,手动添加一个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)
      }
    }
  }

Copy after login

The above is the detailed content of Introduction to the method of embedding check boxes and radio buttons in Element tables (code example). For more information, please follow other related articles on the PHP Chinese website!