Element 默认勾选表格 toggleRowSelection的实现

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

通过了解,结合vue的特殊属性ref引用到Dom元素上,再执行dom上的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')

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

(0)

相关推荐

  • 详解element-ui表格中勾选checkbox,高亮当前行

    我们在做后台管理系统的时候经常需要操作表格,这里我们要实现的一个功能就是,勾选复选框,高亮显示当前行,也就是当前行样式改变.这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格,但是并没有给出上述使用案例,解决办法有很多,我简单总结下我自己的实现过程,希望能帮助到有同样需求的小伙伴. 勾选表格中当前项时会触发selection-change事件,在<el-table>中绑定handleSelectionChange方法. <el-table @selecti

  • Element 默认勾选表格 toggleRowSelection的实现

    官网尽管提供了toggleRowSelection方法,但没有提供demo实例. 通过了解,结合vue的特殊属性ref引用到Dom元素上,再执行dom上的toggleRowSelection方法. 以下通过三种不同的数据来源实现table默认勾选对应的列: 1.固定写在data数据里: 注意el-table上有一个ref="table"的属性 <div id="app"> <template> <el-table :data="

  • ant design vue 表格table 默认勾选几项的操作

    为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR

  • 基于vue v-for 循环复选框-默认勾选第一个的实现方法

    应用场景:在进行多选的时候一般默认显示第一个. 实现方法:纯vue实现 例子: <span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>

  • element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

    目录 背景 1.监听复选框点击事件check 2.手动展开,使用node.expand()方法 项目中的实现 一.复选框勾选后能自动展开并选中,先展开再勾选也可以自动展开 二. 展开指定结点 三. 勾选指定结点 四.展开并勾选结点(支持异步树)牛逼版,实现展开回调 背景 项目中用到了vue的element-ui框架,用到了el-tree组件.由于数据量很大,使用了数据懒加载模式,即异步树.异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或

  • Vue中Element的table多选表格如何实现单选

    目录 Element的table多选表格实现单选 vue table单选逻辑 Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2.主要使用的是ElementUI多选表格中的方法 链接 2.1 select 事件 当用户手动勾选数据行的 Checkbox 时触发的事件 参数selection, row 2.2 row-click 事件 当某一行被点击时会触发该事件 参数 row, column, event 2.3 selection-ch

  • layui表格分页 记录勾选的实例

    layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作.然后需要一个全局变量记录所有已经勾选的项 .下面是自己的代码 . 首先,监听表格的复选框点击事件 , 将单选或全选全部记录下来 var checkArray = new Array(); // 当前页数据 var currentArray ; //监听行单击事件(单击事件为:rowDouble) table.on('checkbox(test)', functio

  • vue+iview Table表格多选切换分页保持勾选状态

    本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码,供大家参考,具体内容如下 第一种情况(配合后端做选中数据处理) 定义三个参数,是否为全选(isSelectAll).不是全选时选择的数据(selectObject: []).反选数据(unSelectObject:[]) HTML <Alert show-icon v-show="openTip">                           已选择              

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

随机推荐