一个需求要求选择一级，下方展示一级的效果
后端给了审批人数据，但是数据需要单独处理
<template><div class="box"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="层级" prop="cj"><el-select v-model="ruleForm.cj" @change="btn" clearable><el-option label="一级" :value="1"></el-option><el-option label="二级" :value="2"></el-option><el-option label="三级" :value="3"></el-option><el-option label="四级" :value="4"></el-option><el-option label="五级" :value="5"></el-option></el-select></el-form-item><el-form-item label="审批人" required><el-timeline class="m-t-20"><el-timeline-item placement="top" v-for="(item,index) in ruleForm.list" :key="index"><el-form-item :prop="'list.'+index+'.userName'" :rules="rules.userName">{{num[index]}}级审批人：<el-select v-model="item.userName" clearable><el-option v-for="(item,index) in option" :key="index" :label="item.userName" :value="item.userName"></el-option></el-select></el-form-item></el-timeline-item></el-timeline></el-form-item><el-form-item><el-button @click="submit">提交</el-button></el-form-item></el-form></div>
</template><script>
export default {data () {return {ruleForm: {cj: '',list: []},rules: {cj: [{ required: true, message: '请选择', trigger: 'change' }],userName: [{ required: true, message: '请选择', trigger: 'change' }]},num: ['一', '二', '三', '四', '五'],// 审批人数据option: [{userId: 11020218,userName: "tumourdata1",aaa: '1'},{userId: 11020217,userName: "tumourdata2",aaa: '12'},{userId: 11020213,userName: "tumourdata3",aaa: '13'}]}},methods: {// 切换层级btn (val) {// 后端需要加上标识，选的几级const selectOptions = [{level: 1,userName: ''},{level: 2,userName: ''},{level: 3,userName: ''},{level: 4,userName: ''},{level: 5,userName: ''}]this.ruleForm.list = selectOptions.slice(0, val)},// 提交submit () {const arr = []this.ruleForm.list.forEach(item => {this.option.forEach(item2 => {if (item2.userName == item.userName) {arr.push({...item2,level: item.level})}})})this.$refs.ruleForm.validate((valid) => {if (valid) {// 提交数据}})}}
}
</script><style lang="less" scoped>
.box {margin: 200px;border: 1px solid black;background: #fff;padding: 30px 0;
}
/deep/ .el-timeline-item__wrapper {top: -20px;
}
</style>
