层级关联，审批人功能

 一个需求要求选择一级，下方展示一级的效果

后端给了审批人数据，但是数据需要单独处理

<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>