vue3笔记(27-1)el-table中使用el-input

本篇记录项目中使用过的“el-table中组合使用el-input”的两种写法。

表头显示类型,某列显示属性名

top-left文字
实现思路: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>()

// 获取参数 API 后
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
)
}

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!