业务场景：
数据隶属于区域之下，区域分为二级，分别为一级区域和二级区域，二级区域隶属于一级区域。存放该数据的数据库表，每条记录和其关联的一级区域、二级区域的id做关联。
现要将数据在前端页面统一管理，并将区域id显示为区域名称；
初始表格渲染数据的写法为：
后端接口查询数据库记录，根据数据记录关联的各个id查询对应区域数据库表的数据，在接口中将区域名称等信息返回给前端，前端直接渲染区域名称字段，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <el-table :data="overviewTableData" style="width: 100% ;" size="small"
:header-cell-style="{ background: '#F8F8F9', color: '#606266' }"
height="83vh"
v-loading="loading"
element-loading-text="拼命加载中"
@row-dblclick="overviewRowClickDispose">
<el-table-column prop="id" label="编号" width="50px" align="center">
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column prop="factory_id" label="分厂" align="center">
</el-table-column>
<el-table-column prop="workshop_id" label="车间" align="center">
</el-table-column>
<el-table-column prop="alarm_type_id" label="报警类型" align="center">
</el-table-column>
<el-table-column prop="name" label="报警原因" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
</el-table-column>
</el-table>
|
面临问题：在编辑信息时，由于字段对应的是区域名称，而数据库中需要的是区域id，需要作处理，有两种方式：
- 前端增加两个列表，存放所有区域的信息，并在渲染表格时，使用v-for、v-if，做名称匹配
- 后端在接受的前端数据后，根据名称查询区域id
这里采用第一种方式，代码如下：
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <el-table :data="overviewTableData" style="width: 100% ;" size="small"
:header-cell-style="{ background: '#F8F8F9', color: '#606266' }"
height="83vh"
v-loading="loading"
element-loading-text="拼命加载中"
@row-dblclick="overviewRowClickDispose">
<el-table-column prop="id" label="编号" width="50px" align="center">
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column prop="factory_id" label="分厂" align="center">
<template slot-scope="scope">
<span
v-for="item in factoryList"
:key="item.id"
:value="item.id"
v-if="scope.row.factory_id == item.id"
>
{{ item.company }}
</span>
</template>
</el-table-column>
<el-table-column prop="workshop_id" label="车间" align="center">
<template slot-scope="scope">
<span
v-for="item in workshopListAll"
:key="item.id"
:value="item.id"
v-if="scope.row.workshop_id == item.id"
>
{{ item.team_name }}
</span>
</template>
</el-table-column>
<el-table-column prop="alarm_type_id" label="报警类型" align="center">
<template slot-scope="scope">
<span
v-for="item in alarmTypeList"
:key="item.id"
:value="item.id"
v-if="scope.row.alarm_type_id == item.id"
>
{{ item.type_name }}
</span>
</template>
</el-table-column>
<el-table-column prop="name" label="报警原因" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text"
@click="overviewDelete(scope.row)">删除</el-button>
<el-button type="text"
@click="overviewUpdate(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
|
