1. 数据规划
首先简化后的数据列表是这样的（limitList是我要求上面的列表名称：限制参数列表）
数组名称 类型 示例 值 含义
限制列表
大批
限制参数列表
-ID
数字
-模块名称
细绳
模块A
配置模块名称
-config描述
细绳
这是测试配置
配置描述信息
-数据状态
数字
是否立即生效，1表示有效，-1表示无效
模块名称也是前端返回的模块列表，只能在此项中选择，不能手动填写
1
2
3
4
5
moduleList: [
{ id:1, moduleName:'模块甲' },
{ id:2, moduleName:'模块乙' },
{ id:3, moduleName:'模块丙' }
]
是有效数组dataStatus前端返回1和1，1表示有效，-1表示无效elementui 表格头，所以我定义了一个dataStatusMap
1
dataStatusMap:[{ value:1,label:"是" }, { value:-1, label:"否" }]
首先是获取并展示表格中的数据，涉及到批量即时编辑，所以封装了一个方法，从前端获取limitList并立即复制进行编辑
1
2
3
4
getLimitList () {
this.limitList=await this.$http.getLimitList()
this copyLimitList= JSON.parse(JSON.stringify(this.limitList))
}
首先定义表结构
1
2
3
4
5
6
7
limitColumns: [
{ type: 'index', width: 60, align: 'center' },
{ title: '所属模块', slot: 'moduleName' },
{ title: '配置描述', slot: 'configDesc' },
{ title: '是否有效', slot: 'dataStatus' },
{ title: '勾选', slot: 'action' }
]
2. 表单展示
表格需要实时编辑，所以要定义槽位，模板中需要两套结构体，分别是默认状态和编辑状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<Table
height="520"
style="border: none"
data="limitList"
columns="limitColumns"
stripe
show-header="true"
>
<template slot-scope="{ row, index }" slot="moduleName">
<Select v-model="copyLimitList[index].moduleName" v-if="copyLimitList[index] && copyLimitList[index].isEdit">
<Option
v-for="moduleName in moduleList"
key="moduleName.moduleName"
label="moduleName.moduleName"
value="moduleName.moduleName"
></Option>
</Select>
<span v-else>{{ row.moduleName }}</span>
</template>
<template slot-scope="{ row, index }" slot="configDesc">
<Input type="text" v-model="copyLimitList[index].configDesc" v-if="copyLimitList[index] && copyLimitList[index].isEdit" />
<span v-else>{{ row.configDesc }}</span>
</template>
<template slot-scope="{ row, index }" slot="dataStatus">
<Select v-model="copyLimitList[index].dataStatus" v-if="copyLimitList[index] && copyLimitList[index].isEdit">
<Option
v-for="dataStatus in dataStatusMap"
key="dataStatus.value"
label="dataStatus.label"
value="dataStatus.value"
></Option>
<Select>
<span v-else>{{ row.dataStatus | dataStatusToChinese }}</span>
</template>
<template slot-scope="{ row, index }"slot="action">
<Checkbox
v-if="copyLimitList[index]"
v-model="limitList[index].isEdit"
></Checkbox>
</template>
</Table>
细心的童鞋应该可以发现，选中的复选框使用的是isEdit数组elementui 表格头，但是我的数据中没有这个数组，而我想要的是这样的疗效：没有这个数组，默认会取消选中，并且如果稍后检查该数组，它将是 ue 。
3.开始编辑
这里默认的数据显示已经可以了，接下来就是编辑了。 我在表单中放置了一些按钮：
1
2
3
4
5
6
7
8
9
10
11
12
<Row>
<Col v-if="!isLimitListEdit" span="4" offset="14">
<Button type="primary" @click="handleEditLimitList">修改选中</Button>
</Col>
<Col span="4" v-else offset="14">
<Button @click="handleEditLimitOk" type="success" style="margin-right: 20px">确定</Button>
<Button @click="handleEditLimitCancel" type="warning" style="margin-right: 20px">取消</Button>
</Col>
<Col span="2">
<Button @click="handleDeleteLimitList">删除选中</Button>
</Col>
</RoW>
其中isLimitListEdit用于控制编辑时按钮显示的切换
1
isLimitListEdit: false
4.修改选择
更改选中按钮为点击暴风雨
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handleEditLimitList () {
// 编辑限制参数列表
const isAllUncheck = this.limitList.every(copyItem => !copyTtem.isEdit);
if (isAllUncheck) {
this.$toast({
title: '请至少选择一项',
type: 'warning'
})
return;
}
this.isLimitListEdit = true;
this.copyLimitList = this.copyLimitList.map((copyItem, index) => {
copyItem.isEdit = this.limitList[index].isEdit
return copyItem
})
}
此时，选中的行将切换为可编辑状态。
5. 完成编辑
编辑完成后，单击“确定”或“取消”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
handleEditLimitOk () {
const editLimitList = this.copyLimitList.filter(copyItem=> copyItem.isEdit)
// 把 copyLimitList里的isEdit为true的发送后端
await this.$http.sendEditLimitList(editLimitList)
//恢复未编辑状态
this.isLimitListEdit = false
//完成以后获取最新的列表
this.getLimitList()
},
handleEditLimitCancel () {
this.isLimitListEdit = false
this.limitList = this.limitList.map(limitItem => {
limitItem.isEdit = false
return limitItem
})
this.copyLimitList = JOSN.parse(JSON.stringify(this.imitList))
}
6. 删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
handleDeleteLimitList () {
const isAllUncheck = this.limitList.every(copyItem => !copyTtem.isEdit);
if (isAllUncheck) {
this.$toast({
title: '请至少选择一项',
type: 'warning'
})
return;
}
this.$Modal.confirm({
title: '提示',
content: '是否确认删除选择的项',
onOk: () => {
const deleteLimitList = this.limitList.filter(copyItem => copyItem.isEdit)
// 把limitList里的isEdit为true的发送后端
await this.$http.sendDeleteLimitlist(deleteLimitList)
this.isLimitListEdit = false
this. getLimitList()
}
})
}
代码不是一切，但不写代码是万万不行的
2021/01/19日记笔记
发表评论