Element UI el-table form 表单的封装思路
思路一: 将所有 form 表单类型都在 el-column-item 组件中定义好,然后根据传入的属性控制展示哪一个 form 表单类型
部分代码如下:
<template>
<div>
<el-row style="padding: 0 20px">
<el-col :span="24" style="text-align: right">
<el-button @click.native="addRow" v-if="!isOperated"
><i class="el-icon-plus el-icon--left"></i>新增行</el-button
>
</el-col>
</el-row>
<el-row style="padding: 20px">
<el-table
ref="multipleTable"
stripe
border
height="250"
:data="data"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column
type="index"
label="序号"
width="50"
align="center"
fixed="left"
>
</el-table-column>
<template v-for="(v, i) in modulsList">
<el-table-column
v-if="!v.hidden"
:label="v.label"
:prop="v.prop"
:key="i"
:width="v.width"
align="center"
>
<template slot-scope="scope">
<el-form-item
:prop="
dataTag ? `${
dataTag}.${
scope.$index}.${
v.prop}` : v.prop
"
label-width="15px"
label=" "
:rules="v.rules"
>
<template v-if="v.type === 'text'">
<el-input
type="text"
v-model="scope.row[v.prop]"
:disabled="v.disabled"
></el-input>
</template>
<template v-else-if="v.type === 'number'">
<el-input-number
v-model="scope.row[v.prop]"
:min="0"
></el-input-number>
</template>
<template v-else-if="v.type === 'textarea'">
<el-input
type="textarea"
:maxlength="v.maxlength"
:show-word-limit="v.limit"
v-model="scope.row[v.prop]"
:disabled="v.disabled"
></el-input>
</template>
<template v-else-if="v.type === 'datePicker'">
<el-date-picker
v-model="scope.row[v.prop]"
type="date"
placeholder="选择日期"
value-format="timestamp"
:disabled="v.disabled"
>
</el-date-picker>
</template>
<template v-else-if="v.type === 'select'">
<el-select v-model="scope.row[v.prop]" placeholder="请选择">
<template v-for="(x, j) in v.options">
<el-option
:label="x.label"
:value="x.value"
:key="j"
></el-option>
</template>
</el-select>
</template>
<template v-else-if="v.type === 'switch'">
<el-switch v-model="scope.row[v.prop]"></el-switch>
</template>
<template v-else-if="v.type === 'selectRemote'">
<el-select
v-model="scope.row[v.prop]"
filterable
remote
placeholder="请输入"
:remote-method="v.searchMethod"
@change="v.changeMethod"
>
<el-option
v-for="(item, i) in v.selectOption"
:key="i"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
<template v-else> </template>
</el-form-item>
</template>
</el-table-column>
</template>
<el-table-column
label="操作"
width="100"
align="center"
fixed="right"
v-if="!isOperated"
>
<template slot-scope="scope">
<el-button type="text" size="mini" @click="deleteRow(scope.$index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
export default {
components: {
},
props: {
// 展示模块
// #description label:名称、prop:Data的对应字段、,type:类型 , default: 新增行默认值
modulsList: {
type: Array,
default: () => {
}
},
// 渲染数据
data: {
type: Array,
default: () => []
},
// 校验标签头
dataTag: {
type: String,
default: ''
},
isOperated: Boolean
},
data() {
return {
}
},
methods: {
// 新增行
addRow() {
let addIndex = this.data.length
let newArr = {
}
this.modulsList.forEach((v) => {
newArr[v.prop] = v.default
})
this.$set(this.data, addIndex, newArr)
console.log('新增行', this.data)
},
// 删除行
deleteRow(index) {
if (this.data.length <= 1) {
this.$message.error('至少含有一条')
return false
}
this.data.splice(index, 1)
console.log('删除行', this.data)
}
},
mounted() {
// 至少含有一条
if (this.data.length === 0) {
this.addRow()
}
}
}
</script>
<style lang="scss" scoped>
.el-table > .el-input,
.el-textarea,
.el-select,
.el-date-editor,
.el-input-number {
width: 100%;
}
</style>
思路二: 将所有 form 表单都单独封装,然后通过一个 js 文件 defineAsyncComponent 汇总这些单独封装的表单组件.使用的时候,通过 component is 来引入使用.
效果如下：
部分代码如下
汇总表单组件的 js文件代码:
import {
defineAsyncComponent } from 'vue'
const formMap = {
FInput: defineAsyncComponent(() =>
import('@/components/form/items/fInput.vue')
),
FRadio: defineAsyncComponent(() =>
import('@/components/form/items/fRadio.vue')
),
FSwitch: defineAsyncComponent(() =>
import('@/components/form/items/fSwitch.vue')
),
FSelect: defineAsyncComponent(() =>
import('@/components/form/items/fSelect.vue')
),
FCheckbox: defineAsyncComponent(() =>
import('@/components/form/items/fCheckbox.vue')
),
FDateTimePicker: defineAsyncComponent(() =>
import('@/components/form/items/fDateTimePicker.vue')
),
FSelectUser: defineAsyncComponent(() =>
import('@/components/form/items/fSelectUser.vue')
),
FPartNo: defineAsyncComponent(() =>
import('@/components/form/items/fPartNo.vue')
),
FSelectSupplier: defineAsyncComponent(() =>
import('@/components/form/items/fSelectSupplier.vue')
),
FSupplierMaster: defineAsyncComponent(() =>
import('@/components/form/items/fSupplierMaster.vue')
),
FCascader: defineAsyncComponent(() =>
import('@/components/form/items/fCascader.vue')
)
}
export default formMap
封装的 formTable 组件代码如下:
<template>
<div class="formTable">
<el-table :data="formTableList.tableData" border style="width: 100%">
<el-table-column
v-for="(item, index) in formTableList.tableHeader"
:key="index"
:prop="item.prop"
:label="item.label"
align="center"
>
<template slot-scope="scope">
<span v-if="item.isTitle"> {
{
scope.row[item.prop] }}</span>
<el-form
v-if="!item.isTitle"
ref="refForm"
:model="scope.row"
:rules="formTableList.formRules"
:label-width="labelWidth"
class="demo-form-inline"
>
<el-form-item :prop="item.prop" label=" ">
<component
:is="formMap[item.formType]"
:meta="item.meta"
:obj="scope.row"
></component>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import formMap from '@/components/form/formMap.js'
export default {
name: 'FormTable',
// watch: {
// formTableList: {
// deep: true,
// handler(val) {
// console.log(val)
// }
// }
// },
props: {
formTableList: {
type: Object,
default() {
return {
}
}
},
labelWidth: {
type: String,
default: 'auto'
}
},
data() {
return {
formMap
}
},
methods: {
modelRef() {
return this.$refs.refForm
}
}
}
</script>
<style lang="scss" scoped>
.formTable {
padding-bottom: 20px;
}
::v-deep .el-select {
width: 100%;
}
</style>
使用 formTable 组件配置项代码如下:
<FormTable
ref="partFourModelRef"
:formTableList="formTableList"
></FormTable>
formTableList: {
formRules: {
RPN: [{
required: true, message: '请输入', trigger: ['blur'] }],
yanzhongdu: [
{
required: true, message: '请输入', trigger: ['blur'] }
],
pindu: [{
required: true, message: '请输入', trigger: ['blur'] }],
tancedu: [{
required: true, message: '请输入', trigger: ['blur'] }]
},
tableHeader: [
{
prop: 'fangmian',
label: '方面',
isTitle: true,
meta: {
fProp: 'fangmian'
}
},
{
prop: 'RPN',
label: 'RPN',
formType: 'FInput',
meta: {
fProp: 'RPN'
}
},
{
prop: 'yanzhongdu',
label: '严重度（S）',
formType: 'FInput',
meta: {
fProp: 'yanzhongdu'
}
},
{
prop: 'pindu',
label: '频度（O）',
formType: 'FInput',
meta: {
fProp: 'pindu'
}
},
{
prop: 'tancedu',
label: '探测度（D）',
formType: 'FInput',
meta: {
fProp: 'tancedu'
}
}
],
tableData: [
{
fangmian: '改善前'
},
{
fangmian: '改善后'
}
]
}