Element 默認勾選表格 toggleRowSelection的實現(xiàn)

更新時間：2019年09月04日 09:16:26 作者：chenjunbiao

這篇文章主要介紹了Element 默認勾選表格 toggleRowSelection的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

官網(wǎng)盡管提供了toggleRowSelection方法，但沒有提供demo實例。

通過了解，結(jié)合vue的特殊屬性ref引用到Dom元素上，再執(zhí)行dom上的toggleRowSelection方法。

以下通過三種不同的數(shù)據(jù)來源實現(xiàn)table默認勾選對應(yīng)的列：

1、固定寫在data數(shù)據(jù)里：

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

在勾子函數(shù)mounted里執(zhí)行checked方法，可以自行測試在實例掛載之前beforeMount和掛載后mounted均使用。
this.$refs.table.toggleRowSelection(this.tableData3[0],true);就是本文的默認勾選的重點，toggleRowSelection(row, selected)接受兩個參數(shù)，row傳遞被勾選行的數(shù)據(jù)，selected設(shè)置是否選中，這個官網(wǎng)寫得很清楚就不多說了。

var Main = {
  data() {
   return {
    tableData3: [{
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-08',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-06',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
     date: '2016-05-07',
     name: '王小虎',
     address: '上海市普陀區(qū)金沙江路 1518 弄'
    }],
    multipleSelection: []
   }
  },
  mounted(){
    this.checked();//每次更新了數(shù)據(jù)，觸發(fā)這個函數(shù)即可。
  },
  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獲得數(shù)據(jù)：

這里使用定時器摸擬了一下。

var Main = {
  data() {
   return {
    tableData3: [],
    multipleSelection: []
   }
  },
  mounted(){
    var _this = this;
     setTimeout(function(){
       _this.tableData3 = [{
       date: '2016-05-03',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
       date: '2016-05-02',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
       date: '2016-05-04',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
       date: '2016-05-01',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
       date: '2016-05-08',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
       date: '2016-05-06',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
       date: '2016-05-07',
       name: '王小虎',
       address: '上海市普陀區(qū)金沙江路 1518 弄'
      }];
      _this.$nextTick(function(){
        _this.checked();//每次更新了數(shù)據(jù)，觸發(fā)這個函數(shù)即可。
    });    
   },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、一開始并沒有數(shù)據(jù)時：

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: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }];
          this.tableData3 = datas;
          this.$nextTick(function(){
            this.checked();//每次更新了數(shù)據(jù)，觸發(fā)這個函數(shù)即可。
           })
          
        }
      }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: