位置: IT常识 - 正文

el-table(type=“selection“)多选框两种回显

编辑:rootadmin
el-table(type=“selection“)多选框两种回显

目录

一、前端数据回显(页面间数据展示)

1、图篇帮助理解

2、描述:

3、代码

4、两个API,一个v-model

二、数据库数据回显

 1、描述:

2、核心代码:

3、比较完整代码:(这是element ui官方文档上的)

4、改动过的,更加适应现实场景的代码:

    几个注意点:


一、前端数据回显(页面间数据展示)1、图篇帮助理解

推荐整理分享el-table(type=“selection“)多选框两种回显,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

2、描述:

 被选择的el-table多选框行数据,以此显示在另一张页面上,类似v-model,实时展示。

    在不了解row-ley,reserve-selection这两个el-table方法之间,为了实现页面间数据回显必然会走些弯路。把简单的操作复杂化了。

3、代码<template><div> <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" :row-key="row=>row.id"> <el-table-column type="selection" width="55" v-model="展示在另一张页面的数据组" :reserve-selection="true"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-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></div></template>4、两个API,一个v-modelel-table(type=“selection“)多选框两种回显

集中在三行代码上,两个API,一个v-model就能让带多选框el-table (页面a)选中的数据展示在另一个页面(页面b)上,【而且(重点)删除另一个页面(b)删除或者添加的时候,可以反作用于页面(a)】。因此,我称之为页面间数据的回显。

 二、数据库数据回显 1、描述:

这应该算是真正意义上的回显了。通过调用后端接口获取数组,然后将这些数据回显到el-table的多选框上。

2、核心代码:

this.$refs.multipleTable.toggleRowSelection(row, true)

3、比较完整代码:(这是element ui官方文档上的)<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-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> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div></template><script> export default { data() { return { tableData: [{ 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: [] } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } }</script>4、改动过的,更加适应现实场景的代码:<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-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><script>import {接口} from "接口路径" export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], res:[], multipleSelection: [] } }, created(){ this.data() }, methods: { data() { 接口(query).then(res=>{ this.res=res if (this.res) { this.res.forEach(el=>{ for(let i=0;i<this.tableDta.length;i++){ if(el==this.tableDta[i]){ this.$refs.multipleTable.toggleRowSelection(this.tableDta[i]); } } }) } }) }, handleSelectionChange(val) { this.multipleSelection = val; } } }</script>    几个注意点:

   1、使用this.$refs.multipleTable.toggleRowSelection(row, true)的时候,传入的row是关联此el-table的data数组中的元素。

   2、数据库数据回显,调用this.$refs.multipleTable.toggleRowSelection(row, true)方法的时候,必须实在el-table挂在完成之后才会起作用,因此eement ui的在页面中使用this.$refs.multipleTable.toggleRowSelection(row, true),是通过添加点击事件来实现的。那么怎么省去点击事件,让其挂在完自动回显,需要找准时机。

本文链接地址:https://www.jiuchutong.com/zhishi/290831.html 转载请保留说明!

上一篇:uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码(适用于 uniapp 微信小程序项目,源代码直接开箱即用)超级详细的代码及注释(uniapp编译原理)

下一篇:注意力机制-CA注意力-Coordinate attention(注意力机制详解)

  • 红米airdots2怎么切换下一首(红米airdots2怎么配对苹果手机)

    红米airdots2怎么切换下一首(红米airdots2怎么配对苹果手机)

  • 苹果9支持双卡双待吗(苹果支持双卡5g吗)

    苹果9支持双卡双待吗(苹果支持双卡5g吗)

  • 华为p40手电筒在哪

    华为p40手电筒在哪

  • 淘宝过了七天无理由还可以退货吗(淘宝过了七天无理由)

    淘宝过了七天无理由还可以退货吗(淘宝过了七天无理由)

  • airpods充电一直闪橙光(airpods充电一直闪)

    airpods充电一直闪橙光(airpods充电一直闪)

  • ipad更新到几代了(苹果ipad更新换代时间)

    ipad更新到几代了(苹果ipad更新换代时间)

  • oppoa52处理器是多少(oppoa52处理器是多少核)

    oppoa52处理器是多少(oppoa52处理器是多少核)

  • 小程序闪退是什么原因(小程序闪退是怎么回事)

    小程序闪退是什么原因(小程序闪退是怎么回事)

  • 小米air2耳机固件能升级吗(小米air2pro耳机固件)

    小米air2耳机固件能升级吗(小米air2pro耳机固件)

  • vivox27视频美颜怎么没了(vivox27视频美颜怎么关闭)

    vivox27视频美颜怎么没了(vivox27视频美颜怎么关闭)

  • nova5pro像素是多少(nova5pro像素怎么样)

    nova5pro像素是多少(nova5pro像素怎么样)

  • 注册微信时的默认头像(注册微信时的默认头像 原图)

    注册微信时的默认头像(注册微信时的默认头像 原图)

  • 程序设计语言的分类(程序设计语言的技术特性不应包括)

    程序设计语言的分类(程序设计语言的技术特性不应包括)

  • 小米9pro怎么添加紧急联系人(小米9zenly)

    小米9pro怎么添加紧急联系人(小米9zenly)

  • 怎么把大视频发给别人(怎么把大视频发给qq好友)

    怎么把大视频发给别人(怎么把大视频发给qq好友)

  • 手机pay支付怎么用(手机pay支付怎么选择银行卡支付)

    手机pay支付怎么用(手机pay支付怎么选择银行卡支付)

  • 属于windows7控制面板中的设置项目是(下列属于windows七控制面板中的设置项目是)

    属于windows7控制面板中的设置项目是(下列属于windows七控制面板中的设置项目是)

  • 为什么最近苹果手机信号和网速都特别慢(为什么最近苹果手机总是没信号)

    为什么最近苹果手机信号和网速都特别慢(为什么最近苹果手机总是没信号)

  • 海信聚好看怎么投电视(海信聚好看怎么样)

    海信聚好看怎么投电视(海信聚好看怎么样)

  • 淘宝司法拍卖在哪里进入(淘宝司法拍卖收费标准)

    淘宝司法拍卖在哪里进入(淘宝司法拍卖收费标准)

  • 如何免费地、完整地把PDF转换为Word(免费地图有哪些)

    如何免费地、完整地把PDF转换为Word(免费地图有哪些)

  • 布里斯托尔海峡的伯恩贝克码头,英国滨海韦斯顿北索美塞得 (© Stephen Davies/Adobe Stock)(布里斯托尔景点)

    布里斯托尔海峡的伯恩贝克码头,英国滨海韦斯顿北索美塞得 (© Stephen Davies/Adobe Stock)(布里斯托尔景点)

  • day35-JSON&Ajax03

    day35-JSON&Ajax03

  • 财务软件按什么排序
  • 开票超过定额怎么办
  • 应付利润借方有余额怎么处理
  • 建筑企业异地申报个税
  • 企业注销资产负债表年初数要调整吗?
  • 个人股权转让给公司
  • 银行收单业务员做什么的
  • 短期借款,应付票据,应付账款和应交税费属于
  • 发票存在哪些税务风险?
  • 怎么确认外购存货成本?
  • 以非现金资产清偿债务的会计处理
  • 小规模建筑企业预缴税款
  • 贷款和应收款项在活跃市场中没有报价
  • 劳务费个税申报税率
  • 贸易公司购进原材料会计分录
  • 同期比较百分比如何计算
  • 应税劳务、服务清单
  • 耕地占用税计入无形资产吗
  • 贴现利息计算器
  • macos big sur怎么升级
  • win10系统日志在哪个文件夹
  • thinkphp paginate
  • php正则表达式验证url
  • PHP:session_decode()的用法_Session函数
  • 为什么要把收入当成舞弊假定
  • php getdate()方法
  • 购车发票遗失了能否去4s店里补开
  • uniapp webgl
  • 生产成本结转怎么登账
  • 小微企业所得税税收优惠政策2023年
  • 个人往来款如何转为公司股权
  • 税控盘开具增值税专用发票步骤
  • 本月的进项票可以抵扣上月税款吗?
  • 先款还是先票
  • 残疾基金出什么科目
  • 金蝶软件利润表公式怎么设置
  • 帝国cms真的很好用
  • 新版个税申报系统查询
  • 收到政府扶贫款如何做分录
  • sql server 2008数据库密码忘记
  • 成本票和进项票举例说明
  • mssqlserver数据能删吗
  • 预收账款可以长期挂账吗
  • 固定资产盘亏是什么意思
  • 在租赁的土地上建房做固定资产吗
  • 前程无忧效果怎么样
  • 收到去年所得税退税款会计分录
  • 发票没有银行账号可以吗
  • 未开票收入怎么报税
  • 高新企业 要求
  • mysql获取所有表的数据量
  • 使用win10
  • 两台电脑如何共享网络
  • mac salad
  • centos7怎么查看进程名称吗
  • solaris的多线程实现方式
  • Win10虚拟内存怎么转移
  • xp系统无法安装win7系统
  • windowsxp服务在哪里
  • 苹果mac使用
  • win8 系统设置
  • windows10 2021预览版
  • win10系统无法打开设置
  • Unity3D游戏开发(第2版)
  • cocos2dx安装win7教程视频
  • Extjs优化(一)删除冗余代码提高运行速度
  • ffmpeg webui 0.9.6
  • unity2d的小游戏
  • matlab中sort函数的作用
  • js页面点击怎么随机生成图片
  • html微信
  • js-cookie vue
  • android进阶书籍
  • 个人进口关税税率
  • 百旺开票人怎么把管理员改成人名
  • 广东省电子税务局app下载官网
  • 江苏省常州市金坛区茅山风景区
  • 小规模年度财务报表
  • 淘宝要补偿怎么回复
  • 惠济区第五中学怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设