欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Element 默认勾选表格 toggleRowSelection的实现

程序员文章站 2022-04-28 20:54:22
官网尽管提供了togglerowselection方法,但没有提供demo实例。 通过了解,结合vue的特殊属性ref引用到dom元素上,再执行dom上的toggle...

官网尽管提供了togglerowselection方法,但没有提供demo实例。

通过了解,结合vue的特殊属性ref引用到dom元素上,再执行dom上的togglerowselection方法。

Element 默认勾选表格 toggleRowSelection的实现

以下通过三种不同的数据来源实现table默认勾选对应的列:

1、固定写在data数据里:

注意el-table上有一个ref="table"的属性

<div id="app">
<template>
 <el-table :data="tabledata3" border ref="table" style="width: 100%" @selection-change="handleselectionchange">
  <el-table-column type="selection" width="55">
  </el-table-column>
  <el-table-column label="日期" width="120">
   <template 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>
</template>
<el-button type="primary" @click="get()">ajax</el-button>
</div>

在勾子函数mounted里执行checked方法,可以自行测试在实例挂载之前beforemount和挂载后mounted均使用。
this.$refs.table.togglerowselection(this.tabledata3[0],true);就是本文的默认勾选的重点,togglerowselection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中,这个官网写得很清楚就不多说了。

var main = {
  data() {
   return {
    tabledata3: [{
     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 弄'
    }, {
     date: '2016-05-08',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-06',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-07',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }],
    multipleselection: []
   }
  },
  mounted(){
    this.checked();//每次更新了数据,触发这个函数即可。
  },
  methods: {
    checked(){
       //首先el-table添加ref="table"引用标识
      this.$refs.table.togglerowselection(this.tabledata3[0],true);
   },
   handleselectionchange(val) {
    this.multipleselection = val;
   }
  }
 }
var ctor = vue.extend(main)
new ctor().$mount('#app')

2、页面一加载使用ajax获得数据:

这里使用定时器摸拟了一下。

var main = {
  data() {
   return {
    tabledata3: [],
    multipleselection: []
   }
  },
  mounted(){
    var _this = this;
     settimeout(function(){
       _this.tabledata3 = [{
       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 弄'
      }, {
       date: '2016-05-08',
       name: '王小虎',
       address: '上海市普陀区金沙江路 1518 弄'
      }, {
       date: '2016-05-06',
       name: '王小虎',
       address: '上海市普陀区金沙江路 1518 弄'
      }, {
       date: '2016-05-07',
       name: '王小虎',
       address: '上海市普陀区金沙江路 1518 弄'
      }];
      _this.$nexttick(function(){
        _this.checked();//每次更新了数据,触发这个函数即可。
    });    
   },3000);
  },
  methods: {
    checked(){
       //首先el-table添加ref="table"引用标识
      this.$refs.table.togglerowselection(this.tabledata3[0],true);
   },
   handleselectionchange(val) {
    this.multipleselection = val;
   }
  }
 }
var ctor = vue.extend(main)
new ctor().$mount('#app')

3、一开始并没有数据时:

var main = {
      data() {
        return {
          tabledata3: [],
          multipleselection: []
        }
      },
      beforemount() {
      },
      methods: {
        checked(){
           //首先el-table添加ref="table"引用标识
          this.$refs.table.togglerowselection(this.tabledata3[2],true);
         },
         handleselectionchange(val) {
            this.multipleselection = val;
         },
        get(){
          var datas=[{
            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 弄'
          }, {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }];
          this.tabledata3 = datas;
          this.$nexttick(function(){
            this.checked();//每次更新了数据,触发这个函数即可。
           })
          
        }
      }
    }
    var ctor = vue.extend(main)
    new ctor().$mount('#app')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。