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获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
json传值以及ajax接收详解
May 24 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php生成随机颜色的方法
2014/11/13 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python读取stdin方法实例
2019/05/24 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
暑期社会实践学生的自我评价
2014/01/09 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
对标管理实施方案
2014/03/12 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
补充协议书
2015/01/28 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
python基础之文件处理知识总结
2021/05/23 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技