vue+ElementUi 选择框选中之后翻页进行状态保持。及默认选中

2019-05-22 admin

复选框

<el-table
:data="list"
ref="multipleTable"
:row-key="(row)=>{ return row.classId}"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection" :reserve-selection="true" ></el-table-column>
</el-table>

//切换分页持久化选中表格

:row-key="(row)=>{ return row.classId}"
:reserve-selection="true"

//@selection-change 会返回所有选中的数据 //@select 会返回所有选中的数据及当前操作的数据

清空所有选中

this.$refs.multipleTable.clearSelection();//页面中有搜索或重置时可能会用到。

默认选中

this.$refs.multipleTable.toggleRowSelection(this.list[index]);//必须传表格的数据;以数组[下标]格式传递

单选框

<el-table
      :data="list"
      ref="multipleTable"
      :row-key="(row)=>{ return row.classId}"
      @current-change="handleCurrentRadio"
      style="width: 100%">
      <el-table-column width="80" v-if="radioShow">
        <template slot-scope="scope">
          <el-radio v-model="radio"  :label="scope.row.classId">{{''}}</el-radio>
        </template>
              </el-table-column>
    </el-table>

//@current-change="handleCurrentRadio"会返回选中的数据。可以在这个事件用return false 来阻止选中 //label 和原生的value属性一样。 利用v-model来绑定唯一值,意味着label的值为唯一的。 //{{""}}为了让单选框不显示label。

[转载]原文链接:https://segmentfault.com/a/1190000019263783

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65489.html

文章标题:vue+ElementUi 选择框选中之后翻页进行状态保持。及默认选中

相关文章
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
回到顶部