当前位置:网站首页>el-table实现增加/删除行,某参数跟着变
el-table实现增加/删除行,某参数跟着变
2022-07-26 09:21:00 【周小盗】
效果展示:
当在中间删除或添加行时,最左侧步骤的内容也会跟着变。
代码展示:
首先,html中的el-table代码:
<el-table-self :data="setList" style="width: 100%" max-height="250">
<el-table-column align="center" prop="orderNum" label="步骤" width="80">
<template slot-scope="scope">
<span>第{
{
scope.row.orderNum}}步</span>
</template>
</el-table-column>
<el-table-column align="center" prop="type" label="类型">
<template slot-scope="scope">
<el-select
size="small"
v-model="scope.row.type" placeholder="请选择">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column align="center" prop="realname" label="审批用户">
<template slot-scope="scope">
<el-select
size="small"
:disabled="scope.row.type!=='1'"
v-model="scope.row.userId"
placeholder="请选择">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.realname"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column align="center" prop="roleName" label="审批角色">
<template slot-scope="scope">
<el-select
size="small"
:disabled="scope.row.type!=='2'"
v-model="scope.row.roleId"
placeholder="请选择">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.roleName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="flowCode" label="流程编码" ></el-table-column>
<el-table-column fixed="right" align="center" label="操作" width="180">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-plus"
@click.native.prevent="addRow(scope.$index, setList)"></el-button>
<el-button size="mini" type="primary" icon="el-icon-minus"
@click.native.prevent="deleteRow(scope.$index, setList)"></el-button>
</template>
</el-table-column>
</el-table-self>
然后,methods中需要有三个方法:(如下)
//第一:获取el-table中的数据 setList
getcheckedId() {
this.$axios({
//url和各个参数
}).then((res) => {
//将获取到的返回值赋值给setList
this.setList=res.data
//如果setList中没有数据,则手动push一条数据,可以展示 + ,— 号
if(this.setList.length<1){
this.setList.push({
flowCode:'',
orderNum: res.data.length+1,
realname: '',
userId: '',
remark: "",
roleId: "",
roleName: "",
scope: 0,
updateTime: null,
})
}
}).catch(() => {
// return
})
},
//第二:点击 + 号执行添加一行数据的方法
addRow(index, rows) {
//用数组的splice方法从index+1位置删除0个元素,并插入一条空数据
rows.splice(index+1,0,{
flowCode:'',
orderNum: index+2,
realname: '',
userId: '',
remark: "",
roleId: "",
roleName: "",
scope: 0,
updateTime: null,
});
},
//第三:点击 — 号执行删除一行的方法
deleteRow(index, rows) {
//利用数组的splice方法,将该index数据删除
rows.splice(index, 1);
},
最终要的一点,对orderNum(步骤编号)的处理——对setList的数据进行监听
setList:{
handler: function (newVal,oldVal) {
// console.log("监听setList长度",newVal.length,oldVal.length)
if(newVal.length){
for(let i in newVal){
//实时获取orderNum的值
newVal[i].orderNum=Number(i)+1
}
}
//这里用来判断,如果是用户审批,就把角色制空;如果是角色审批,就把用户制空
for(let i in newVal){
if(newVal[i].type==='1'){
newVal[i].roleId=''
newVal[i].roleName=''
}else if(newVal[i].type==='2'){
newVal[i].userId=''
newVal[i].realname=''
}
}
},
deep: true //深度监听
}
结束语:
以上,就可以实现我们想要的结果了!(ps:写博客是为了记笔记!)
边栏推荐
- 【Mysql】redo log,undo log 和binlog详解(四)
- Innovus卡住,提示X Error:
- [online problem] timeout waiting for connection from pool problem troubleshooting
- Zipkin installation and use
- Qt | 关于如何使用事件过滤器 eventFilter
- Polynomial open root
- Zipkin安装和使用
- 【线上问题】Timeout waiting for connection from pool 问题排查
- The child and binary tree- open root inversion of polynomials
- CF1481C Fence Painting
猜你喜欢
OFDM 十六讲- OFDM
NTT (fast number theory transformation) polynomial inverse 1500 word analysis
Bloom filter
Li Mu D2L (V) -- multilayer perceptron
arcgis的基本使用4
Unity topdown character movement control
【线上问题】Timeout waiting for connection from pool 问题排查
JVM command induction
[MySQL] how to execute an SQL statement (2)
The essence of attack and defense strategy behind the noun of network security
随机推荐
Simple message mechanism of unity
Codeworks DP collection
838. 堆排序
opencv图像处理
Zipkin installation and use
会议OA项目(三)---我的会议(会议排座、送审)
多项式开根
JVM command induction
js在控制台输出菱形
Voice chat app source code - Nath live broadcast system source code
布隆过滤器
性格测试系统v1.0
Cat installation and use
Pat grade a A1034 head of a gang
volatile 靠的是MESI协议解决可见性问题?(下)
字节缓冲流&字符流详解
Your login IP is not within the login mask configured by the administrator
arc-gis的基本使用2
"Could not build the server_names_hash, you should increase server_names_hash_bucket_size: 32"
Li Mu D2L (VI) -- model selection