vue表格刷新数据_vue+element-ui实现表格某个数据弹窗添加数据,保存后数据更新,再次打开弹窗,数据回显...

本文介绍了如何使用 Vue 和 Element UI 实现表格数据的动态插入、更新以及弹窗选择数据后回显。详细讲述了通过级联选择器选择地址插入表格,以及在表格中添加、删除数据的逻辑。同时,文章还涵盖了点击表格按钮时保持选中状态的实现,以及如何在弹窗中选择岗位并保存后回显到表格。
摘要由CSDN通过智能技术生成

实现功能:

1、生成数据插入table

2、修改table的某个数据,保存后该数据进行更新

3、点击table的btn,选择的数据仍是选中状态,数据回显

示例-1-选择地址插入表格

示例-2-选择指定岗位

示例-3-选择岗位出现table里

示例-4-打开弹窗之前选择的岗位仍是选中

一、页面布局

Cascader 级联选择器选择地址插入table,插入的数据可删除,可添加岗位

页面布局代码:

placeholder="请选择指定发放地区"

:options="cityOptions"

:props="{ checkStrictly: true }"

clearable

filterable

v-model="areaCodeAll"

style="width: 350px;"

@change="getCityFn"

ref="myCascader"

>

针对全国发放就选中全国,针对指定区域发放就选中指定地区

先选择指定地区,然后点击右侧的确定按钮才算成功指定投放

:header-cell-style="{background:'#f4f4f5'}">

header-align="center" align="center">

{ {scope.row.professions.map(it => it.name).join(',') ||

'岗

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值