一个需求要求选择一级,下方展示一级的效果
后端给了审批人数据,但是数据需要单独处理
<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>