根据级联选择器选择后自动会出现相对应的表单结构

最新推荐文章于 2025-04-11 19:11:11 发布

阳光雨滴

最新推荐文章于 2025-04-11 19:11:11 发布

阅读量60

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/bbkhhvv/article/details/132472342

版权

文章描述了一个使用Vue.js开发的项目中，如何通过el-cascader级联选择器控制财务信息表单的显示与隐藏。当用户选择不同的业务类型时，对应的财务表单项会动态加载或消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果是这样的，选择业务后就会在财务信息里出现相应的表单，删除选择的业务，表单就会消失

代码：

 <fieldset>
        <legend>业务类型</legend>
        <el-form-item label="类型">
          <el-cascader @change="change" :props="props" :options="options" :show-all-levels="false" ref="cascaderArr"
            v-model="formData.ywlx"></el-cascader>
        </el-form-item>
  </fieldset>
  <fieldset>
        <legend>财务信息</legend>
        <el-form-item v-for="(item, index) in formData.member" :key="index" :label="item.name">
          <el-input v-model="item.amount"></el-input>
        </el-form-item>
  </fieldset>

<script>
   export default {
       data(){
         return{
             props: { multiple: true, value: "id", label: "name", emitPath: false },
             //业务数组
             options: [],
              formData: {
                  //业务
                  ywlx: [],
                  member: [],
           },
        }
     },
     methods:{
     //级联选择器
    change(val) {
      //判断是否为编辑
      if (this.id) {
        this.formData.member = [];
        this.$nextTick(() => {
          const checkedNode = this.$refs["cascaderArr"].getCheckedNodes();
          let array = checkedNode.filter(
            (item) => !item.data.hasOwnProperty("children")
          );
          let list= []
          array.forEach((res) => {
            list.push(res.data)
          });
          //过滤出相同的对象组成的新数组
          let a = this.memberEdit.filter(item => list.find(num => item.name == num.name))
          //过滤出不相同的对象组成的新数组
          let b = list.filter(item => !(this.memberEdit.map(num => num.name)).includes(item.name))
          //俩数组合并
          this.formData.member = a.concat(b)
        })
      } else {
        this.formData.member = [];
        this.$nextTick(() => {
          const checkedNode = this.$refs["cascaderArr"].getCheckedNodes();
          let array = checkedNode.filter(
            (item) => !item.data.hasOwnProperty("children")
          );
          array.forEach((res) => {
            this.formData.member.push(res.data);
          });
        });
      }
    },
     },
 mounted() {
    //判断是编辑还是新增
    if (this.$route.query.id !== undefined) {
      this.id = this.$route.query.id;
      getProject(this.$route.query.id).then((res) => {
        this.memberEdit = res.data.member;
        Object.assign(this.formData, res.data);
      });
    }
    //获取业务数组
    getBusiness().then((res) => {
      this.options = res.data;
    }),
      this.rest();
  },
   }
</script>

getBusiness是获取业务里面数据的数组，

getProject是编辑的接口，mounted是判断是否为编辑，然后将接口返回的数据在通过Object.assign给到formData,

change方法是判断是否为编辑，不是编辑就直接走下面的方法，是编辑的话考虑到联动效果，里面的name是后端返给的那个业务汉字名字，我当时是靠name来进行判断的，根据实际需求自行判断

props里面是一些配置项，请看官网组件介绍