直接上代码
<el-form ref="form" :rules="rules" :model="formData">
<!-- 这里取出数组 -->
<el-table border :data="formData.data" style="width: 100%" :header-cell-style="{backgroundColor: '#D2EDEA !important'}">
<el-table-column type="index" width="50" label="序号" />
<el-table-column prop="paramsName" label="参数" />
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 这里要指明需要做校验的字段,以及规则是哪个 -->
<el-form-item v-if="scope.row.districtParamsId === '1'" :prop="'data.' + scope.$index + '.defaultValue'" :rules='rules.disease'>
<el-select
v-model="scope.row.defaultValue"
multiple
collapse-tags
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item in selectData"
:key="item.code"
:label="item.value"
:value="item.code"
/>
</el-select>
</el-form-item>
<!-- 这里要指明需要做校验的字段,以及规则是哪个 -->
<el-form-item v-else-if="scope.row.districtParamsId === '2'" :prop="'data.' +scope.$index + '.defaultValue'" :rules='rules.isHealth'>
<el-radio-group v-model="scope.row.defaultValue">
<el-radio label="1">是</el-radio>
<el-radio label="2">否</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="paramsDesc" label="说明" />
</el-table>
</el-form>
<script>
data() {
return {
formData: {},
rules: {
disease: [
{ required: true, message: '请选择数据', trigger: 'change' }
],
isHealth: [
{ required: true, message: '请选择数据', trigger: 'change' }
],
},
},
methods: {
async fetchDistrictParameter() {
const tableData = await this.$http3.get(`/system-settings/district/parameters`)
//因为是表格,所以返回的数组,这里用对象包裹一下不然会报错说需要对象但是赋值了数组,保存的时候需要的话再取出来保存
this.formData = {data: tableData}
},
},
},
}
</<script>>