zoukankan      html  css  js  c++  java
  • vue element-ui el-table 选择框单选修改

     
    <el-table
            ref="table"
            :data="tableData"
            style=" 100%"
            border
            @selection-change="handleSelectionChange"
            @select-all="selectAll"
        >
          <el-table-column
              type="selection"
              width="55">
          </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>
    

        

    data() {
        return {
          data: [1, 2, 3],
          msg: '我是父组件里的信息',
    
          tableData: [
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ],
          obj: {}, //保存当前选中内容
        }
      },
      methods: {
        handleSelectionChange(selection) {
          this.obj = selection[0];
    
          if (selection.length > 1) {
            this.$refs['table'].clearSelection();
            this.$refs['table'].toggleRowSelection(selection.pop());
          }
    
        },
    
        // 禁止全选按钮
        selectAll(){
          this.$refs['table'].clearSelection();
        }
      },
    

      

     

  • 相关阅读:
    vue中@事件处理函数的柯里化
    一个例子生动理解js的原型_js的原型prototype和__protopy__区别
    vue3自定义v-model
    js初始化一个特定值的array
    dom的clientHeight、scrollHeight以及offsetHeight
    ts踩坑记录
    常见问题1
    资料share
    几种开放源码的TCPIP协议栈
    阻塞与非阻塞,同步与异步
  • 原文地址:https://www.cnblogs.com/Blogzlj/p/15166291.html
Copyright © 2011-2022 走看看