赞
踩
效果图:
1.首先先排版需要的表单
- <el-tab-pane name="second" label="编辑配置"
- ><el-form ref="rulesforms" :model="rulesforms">
- <el-row v-for="(item, index) in ruleForms" :key="index">
- <el-col :span="3" style="margin: 2px">
- <span>左括号符号</span>
- <el-form-item :prop="'ruleForms.' + index + '.leftBracket'">
- <el-select
- @change="leftChange(index)"
- placeholder="左括号符号"
- v-model="item.leftBracket"
- clearable
- >
- <el-option
- v-for="(item, index) in leftBracketData"
- :key="index"
- :label="item"
- :value="item"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="3" style="margin: 2px">
- <span>体检项目</span>
- <el-form-item
- :prop="'ruleForms.' + index + '.inspectProjectsId'"
- >
- <el-select
- placeholder="请选择体检项目"
- clearable
- filterable
- v-model="item.inspectProjectsId"
- >
- <el-option
- v-for="item in listKv"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="4" style="margin: 2px">
- <span>运算符</span>
- <el-form-item
- :prop="'rulesform.' + index + '.conditionOperationType'"
- >
- <el-select
- placeholder="请选择运算符"
- v-model="item.conditionOperationType"
- >
- <el-option
- v-for="item in conditionOperationTypeData"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="2" style="margin: 2px">
- <span>值</span>
- <el-form-item :prop="'rulesform.' + index + '.value'">
- <el-input
- style="width: 11.2vw"
- v-model="item.value"
- placeholder="请输入值"
- clearable
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="4" style="margin: 2px">
- <span>右括号符号</span>
- <el-form-item :prop="'rulesform.' + index + '.rightBracket'">
- <el-select
- placeholder="右括号符号"
- v-model="item.rightBracket"
- >
- <el-option
- v-for="(i, index) in rightBracketData"
- :key="index"
- :label="i"
- :value="i"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="2" style="margin: 2px">
- <span>条件</span>
- <el-form-item :prop="'rulesform.' + index + '.conditionType'">
- <el-select
- placeholder="请选择条件"
- v-model="item.conditionType"
- >
- <el-option
- v-for="item in conditionTypeData"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <!-- 添加删除按钮 -->
- <el-col
- :span="2"
- style="
- align-items: center;
- display: flex;
- justify-content: center;
- "
- >
- <div v-if="index == 0" @click="addItem">
- <img
- style="width: 20px; height: 20px"
- src="../../../../assets/img/加号.png"
- />
- </div>
- <div v-if="index != 0" @click="delItem(index)">
- <img
- style="width: 20px; height: 20px"
- src="../../../../assets/img/减少.png"
- />
- </div>
- </el-col>
- </el-row>
- </el-form>
- </el-tab-pane>

2.这是在setup里定义双向绑定的字段
- ruleForms: [
- {
- diagnosisRulesId: null,
- inspectProjectsId: null,
- leftBracket: "",
- conditionType: null,
- conditionOperationType: null,
- value: null,
- rightBracket: "",
- sort: 0,
- },
- ],
3.点击添加重新push一行表单
- //新增表单
- addItem() {
- state.ruleForms.push({
- diagnosisRulesId: state.id,
- inspectProjectsId: null,
- leftBracket: "",
- conditionType: null,
- conditionOperationType: null,
- value: null,
- rightBracket: "",
- sort: 0,
- });
- },
4.根据获取当前行下标删除当前点中的行表单
- //删除表单
- delItem(index) {
- state.ruleForms.splice(index, 1);
- },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。