本篇记录项目中使用过的“el-table中组合使用el-input”的两种写法，表格中合并单元格展示的hack写法（自己发明），后期有更好的实现方式也会更新。
表头显示类型，某列显示属性名
实现思路：form 放在最外层包裹，el-table 绑定表格数据，其中某列数据（此处为属性名attr）使用文字插入，prop 和 input 输入框里的值的索引都为 name，将校验规则绑定在 el-form-item 中，可实现提交时表单校验。
#default="scope"用于在表格中插入输入框。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <el-form
ref="productAttrFormRef"
:model="productAttrForm"
:rules="productAttrFormRules"
>
<el-table :data="attrTableData" border>
<el-table-column prop="attr" label="产品属性" width="160"></el-table-column>
<el-table-column prop="value" label="新值（变更后）" width="640">
<template #default="scope">
<el-form-item
label=""
:prop="scope.row.name"
:rules="productAttrFormRules[scope.row.name]"
>
<el-input
v-model="productAttrForm[scope.row.name]"
placeholder="请输入新值"
></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const attrTableData = reactive([
{
attr: '版本',
name: 'version'
},
{
attr: '频率',
name: 'frequence'
}
])
const productAttrFormRules = reactive({
version: [
{ required: true, trigger: ['blur', 'change'] }
],
frequence: [
{ required: false, trigger: ['blur', 'change'] },
{ validator: validateText50, trigger: ['blur', 'change'] }
]
})
|
整行可编辑
实现思路：form 放在最外层包裹，el-table 绑定表格数据。
#header用于自定义表头，实现必填项红色标记，#default="scope"用于在表格中插入输入框。
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
59
60
| <el-form ref="detailFormRef" :model="detailForm">
<el-table :data="detailForm.tableData">
<el-table-column prop="product_classification" label="产品类型">
<template #header="{ column }">
<span style="color: red">*</span>
{{ column.label }}
</template>
<template #default="scope">
<el-form-item
v-if="scope.row.edit"
:prop="'tableData.' + scope.$index + '.product_classification'"
:rules="detailRules.product_classification"
>
<el-select
v-model="scope.row.product_classification"
placeholder="请选择产品类型"
>
<el-option
v-for="item in productTypeOptions"
:key="item.id"
:label="item.value"
:value="item"
/>
</el-select>
</el-form-item>
<span v-else>{{ scope.row.product_classification.value }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="234" align="left">
<template #default="scope">
<el-button
link
type="primary"
@click="saveDetail(scope.$index, scope.row)"
v-if="scope.row.edit"
>保存</el-button
>
<el-button
link
type="primary"
@click="editDetail(scope.$index, scope.row)"
v-if="!scope.row.edit"
>编辑</el-button
>
<el-button
link
type="primary"
@click="deleteDetail(scope.$index, scope.row)"
:disabled="detailForm.tableData.length == 1"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
<div class="add-row">
<el-button type="info" link @click="addDetailRow">
+ 添加一行
</el-button>
</div>
|
最外层的 form 中使用 tableData 绑定数据，初始化时，若处于新增状态，则默认添加一行，若处于编辑状态，则表格中直接展示获取到的数据。
1
2
3
4
5
6
7
8
| const detailFormRef = ref<typeof FormInstance>()
if (data.order_detail && data.order_detail.length == 0) {
addDetailRow()
} else {
detailForm.tableData = detailList
}
|
点击“编辑”可将表格数据变成编辑态（input），点击“保存”可将编辑态数据变成表格文字。处于编辑态时，不能再次新增，原因是每行绑定所有校验规则（单列单条），若多条数据同处于编辑状态，可能触发同样的校验，引起矛盾。
点击“删除”可以删除整行数据，但表格中只有一行时，不可删除。
代码中表格每一行使用 edit 属性标记编辑状态：
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
| const isEditing = () => {
return (
detailForm.tableData.filter((item) => {
return item.edit === true
}).length > 0
)
}
const addDetailRow = () => {
if (isEditing()) {
ElMessage.info('只能新增一行')
} else {
detailForm.tableData.push({
edit: true
})
}
}
const saveDetail = (index: any, row: any) => {
const form = unref(detailFormRef)
form.validate((valid: boolean) => {
if (valid) {
row.edit = false
} else {
return false
}
})
}
const editDetail = (index: any, row: any) => {
console.log('scope.$index=', index, row)
if (isEditing()) {
ElMessage.info('只能同时编辑一行')
} else {
row.edit = true
changeProductType(index, row.product_classification.id, 1)
}
}
const deleteDetail = (index: any, row: any) => {
detailForm.tableData.splice(index, 1)
}
|
提交表单时，需要对是否有行内编辑进行一次判断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const handleAddBusiness = (formEl: typeof FormInstance | undefined) => {
const form = unref(formEl)
form.validate((valid: boolean) => {
if (valid) {
if (isEditing()) {
ElMessage.info('订单明细尚有内容正在编辑，请先保存')
} else {}
}
})
}
const isEditing = () => {
return (
detailForm.tableData.filter((item) => {
return item.edit === true
}).length > 0
)
}
|
合并单元格展示
el-table-column 进行嵌套可实现合并单元格表头，嵌套部分需要加上 rowspan="2"。
内容显示需要使用 pre 标签进行文本换行，避免文字会自动拼接，使用户迷惑。
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
| <el-table-column label="订单明细" show-overflow-tooltip width="360">
<el-table-column label="产品类型" width="120" rowspan="2">
<template #header> 产品类型 </template>
<template #default="{ row }">
<template v-for="(item, index) in row.order_detail" :key="index">
<pre>
<span v-if="item.product_type">{{ item.product_type }}</span>
<span v-else>--</span>
</pre>
</template>
</template>
</el-table-column>
<el-table-column label="产品名称" width="120" rowspan="2">
<template #header> 产品名称 </template>
<template #default="{ row }">
<template v-for="(item, index) in row.order_detail" :key="index">
<pre>
<span v-if="item.product_name">{{ item.product_name }}</span>
<span v-else>--</span>
</pre>
</template>
</template>
</el-table-column>
<el-table-column label="数量" width="120" rowspan="2">
<template #header> 数量 </template>
<template #default="{ row }">
<template v-for="(item, index) in row.order_detail" :key="index">
<pre>
<span v-if="item.transaction_number">{{ item.transaction_number }}</span>
<span v-else>--</span>
</pre>
</template>
</template>
</el-table-column>
</el-table-column>
|
再给每行文字添加底部边框之后，因为 cell 自带 padding，需要对 css 进行修改，使得边框两端连续，模拟了表格分割线。
1
2
3
4
5
6
7
8
9
10
11
12
13
| .el-table .cell.el-tooltip {
white-space: pre-wrap;
}
.cell {
pre:not(:last-child) {
border-bottom: 1px solid #ebeef5;
width: calc(100% + 24px);
margin-left: -12px;
span {
padding-left: 12px;
}
}
}
|