【Vue-Element UI】三级表单可选框以及显示、修改和删除表单属性

目录

三级表单可选框

静态界面

收集数据 

获取数据

属性值内容显示 

一些知识点

（1）Vue.nextTick()

（2）$set

（3） ref

（4）一些数组方法

（5）深拷贝

（6）@blur

---

三级表单可选框

效果：

这里是后台管理系统的三级选择器，只有当第一级分类选中属性时，第二个才能选，以此类推。

静态界面

Element ui里面的表单选择器：组件 | Element

这里用到的Form属性： 

inline属性可以让表单域变为行内的表单域    inline为true代表的是行内表单，代表一行可以放置多个表单元素

model属性为表单的数据对象

这里用到的Form-Item属性 ：

label属性：标签的文本

    <el-form :inline="true" class="demo-form-inline" :model="cForm">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" value="" v-model="cForm.category1Id" @change="handle1">
          <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in list1" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" value="" v-model="cForm.category2Id" @change="handle2">
          <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in list2" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
            <el-form-item label="三级分类">
        <el-select placeholder="请选择" value="" v-model="cForm.category3Id" @change="handle3">
          <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in list3" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

收集数据 

需要调取服务器的数据，利用v-model，把三个分类的数据先在data中收集空数组：

 data() {
    return {
        //一级分类的数据
        list1:[],
        //二级分类的数据
        list2:[],
        //三级分类的数据
        list3:[],
        //收集相应一级二级三级分类的id
        cForm:{
            category1Id:'',
            category2Id:'',
            category3Id:''
        }
    };
  },

三级分类的内容都会携带id

所以利用cForm在data中收集了三级分类的不同内容的id。

获取数据

当组件挂载完毕：向服务器发请求，获取相应的数据

  mounted(){
      this.getCategory1List()
  },
  components: {},
  methods: {
    //获取一级分类数据方法
    async getCategory1List(){
        //获取一级分裂的数据 不需要携带参数
        let result = await this.$API.attr.reqCategory1List()
        if(result.code==200){
            this.list1=result.data
        }
    },
    
  }

当三级分类改变时，要响应相应的数据，当选择第一级分类的数据时，需要清除后面两级的数据，并且让它们的id置空，以此类推。

//一级分类select事件回调
    async handle1(){
        //当一级分类改变时，清除数据
        this.list2=[]
        this.list3=[]
        this.cForm.categ