Element 默认勾选表格 toggleRowSelection的实现


Posted in Javascript onSeptember 04, 2019

官网尽管提供了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')

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

Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
深入理解Node module模块
Mar 26 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 #Javascript
vue-loader中引入模板预处理器的实现
Sep 04 #Javascript
解决layer图标icon不加载的问题
Sep 04 #Javascript
JSX在render函数中的应用详解
Sep 04 #Javascript
关于layui的动态图标不显示的解决方法
Sep 04 #Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 #Javascript
简单谈谈javascript高级特性
Sep 04 #Javascript
You might like
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python守护进程实现过程详解
2020/02/10 Python
为什么python比较流行
2020/06/19 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
新闻编辑自荐书范文
2014/02/12 职场文书
教师师德考核自我评价
2014/09/13 职场文书
银行转正自我鉴定
2014/09/29 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
扬州个园导游词
2015/02/06 职场文书
网络管理员岗位职责
2015/02/12 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Log4j.properties配置及其使用
2021/08/02 Java/Android