位置: 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(注意力机制详解)

  • 八个小技巧教你如何做好淘宝店铺运营(3个小窍门大家学起来)

    八个小技巧教你如何做好淘宝店铺运营(3个小窍门大家学起来)

  • 小米mde1是什么型号的手机(小米型号mde2是什么手机)

    小米mde1是什么型号的手机(小米型号mde2是什么手机)

  • 华为p40pro出厂有贴膜吗(华为p40pro出厂价格是多少)

    华为p40pro出厂有贴膜吗(华为p40pro出厂价格是多少)

  • 荣耀30pro如何设置锁屏壁纸(荣耀30pro如何设置地震预警)

    荣耀30pro如何设置锁屏壁纸(荣耀30pro如何设置地震预警)

  • 苹果手机时间限额(苹果手机时间限额是什么意思)

    苹果手机时间限额(苹果手机时间限额是什么意思)

  • 荣耀stftl10什么型号(荣耀trt-tl10a)

    荣耀stftl10什么型号(荣耀trt-tl10a)

  • 小米插座基础版和WIFI版区别(小米插座基础版坏了)

    小米插座基础版和WIFI版区别(小米插座基础版坏了)

  • 手机怎么删除淘宝退货记录(手机怎么删除淘宝回收站)

    手机怎么删除淘宝退货记录(手机怎么删除淘宝回收站)

  • oppor17怎么放内存卡(oppo手机怎么内放)

    oppor17怎么放内存卡(oppo手机怎么内放)

  • 电脑风扇坏了,会有什么坏结果(电脑风扇坏了能继续用吗)

    电脑风扇坏了,会有什么坏结果(电脑风扇坏了能继续用吗)

  • 电容器的容量是指什么(电容器的容量是电容量为什么是错的)

    电容器的容量是指什么(电容器的容量是电容量为什么是错的)

  • 曝光模式有哪些(曝光的三种模式)

    曝光模式有哪些(曝光的三种模式)

  • vivo怎么强制分屏(vivo怎样强行分屏)

    vivo怎么强制分屏(vivo怎样强行分屏)

  • 怎么控制qq群里的骰子(怎么控制qq群人数)

    怎么控制qq群里的骰子(怎么控制qq群人数)

  • 信号隔离器的工作原理和作用(信号隔离器的工作原理是)

    信号隔离器的工作原理和作用(信号隔离器的工作原理是)

  • 荣耀30s尺寸(下一页p20)

    荣耀30s尺寸(下一页p20)

  • 已发朋友圈再修改分组(已发朋友圈再修改文案)

    已发朋友圈再修改分组(已发朋友圈再修改文案)

  • 苹果手机天气预报怎么设置(苹果手机天气预报准不准)

    苹果手机天气预报怎么设置(苹果手机天气预报准不准)

  • 苹果蓝牙耳机怎么打电话(苹果蓝牙耳机怎么连)

    苹果蓝牙耳机怎么打电话(苹果蓝牙耳机怎么连)

  • mate20性能模式要一直开吗(华为性能模式提升速度多少)

    mate20性能模式要一直开吗(华为性能模式提升速度多少)

  • 两个硬件要求是什么(两个硬件要求是什么意思)

    两个硬件要求是什么(两个硬件要求是什么意思)

  • 小程序制作流程(个人制作小程序制作流程)

    小程序制作流程(个人制作小程序制作流程)

  • 爱奇艺如何激活免流(爱奇艺如何激活码兑换)

    爱奇艺如何激活免流(爱奇艺如何激活码兑换)

  • Win7系统如何禁用光驱?(win7如何禁用wifi)

    Win7系统如何禁用光驱?(win7如何禁用wifi)

  • python 下载 国内(python国内下载地址)

    python 下载 国内(python国内下载地址)

  • 以前多摊销
  • 待处理财产损益借贷方向
  • 网银转账往来款
  • 小规模个税每月限免额是多少
  • 收到促销费方怎么做账
  • 客户逾期付款
  • 重新建账 和之前数据差的多
  • 一般纳税人收到专票怎么做分录
  • 资产收购应如何计算
  • 私立医院收到投诉信
  • 生产企业有哪些费用
  • 购买的职业险计入哪个科目
  • 因质量问题怎么赔偿
  • 诉讼费可以入公司账吗
  • 个人投资理财需要注意什么
  • 工资报税怎么报的原则
  • 工业企业水电费需要计提吗
  • 企业所得税季报怎么申报
  • 个人股权激励收入计入年度综合个人所得税吗
  • 建筑业跨区预缴增值税未预缴
  • 编制会计报表利润表
  • 资产收购的特殊性税务处理方法
  • windows7如何删除软件
  • 企业如何选择会计师事务所
  • 小型微利企业怎么认定最新标准
  • 电脑病毒的特点包括
  • 商品结转成本后怎么做账
  • 上月抵扣的发票怎么开
  • element ui+vue
  • php如何提高程序运行效率
  • 会计分录的基本构成要素
  • 目前超频最高几ghz
  • 税前扣除的比例
  • PyTorch 深度学习实战 | DIEN 模拟兴趣演化的序列网络
  • lsattr命令不存在
  • php date()
  • 第三方车行
  • 生产辅助
  • 开一般户需要基本户开户许可证吗
  • 公司向股东借的钱怎么还
  • 企业会计准则子公司
  • 月末一般无余额的账户是( )
  • mysql 索引 key
  • 回扣发票能查出来么
  • 小规模进项是专票销项是普票可以抵扣吗
  • 应交税费明细科目设置最新
  • 公司的零星开支怎么做账
  • 小规模纳税人购买原材料会计分录
  • 评估价值高于账面价值怎么账务处理
  • 税总函2019是什么意思
  • 固定资产出售增值税减按2%征收,附表一,填写
  • 公司多出来的钱怎么办
  • 将借款存入银行会计分录
  • 制造费用会计科目
  • 担保属于债权吗
  • 简易征收可以抵税吗
  • 所附原始凭证的作用是
  • sql里case
  • ubuntu20.04.1安装
  • winctlad.exe - winctlad是什么进程
  • windows使用linux软件
  • rds是啥
  • 怎么用win7兼容模式运行
  • linux关闭sh
  • win7 0x80070002处理方法
  • python利用for循环求1到100的和
  • opencv与pil
  • 第一章初见第二章决定
  • hadoop有几个版本
  • unity3d跑酷游戏教程
  • jqurey+Jscex打造游戏力度条
  • 安卓初始化
  • js cookie用法
  • python3连接pg执行命令
  • bootstrap js插件
  • 浙江国税电子税务局
  • 未清卡会锁死吗?
  • 广东省电子税务局app下载官网
  • 船舶吨税的税目
  • 留抵税额怎么形成的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设