辉太郎看前端(element-ui中级联选择器判断内容长度控制按钮是否能够使用)

前言

1. 获取级联选择器的内容。
2. 定义数组存储数据。
3. 设置级联选择器的配置。
4. 定义存储级联选择器内容的数组并双向绑定到级联选择器中。
5. 判断数组长度是否等于3，返回需要的Boolean值。

使用级联选择器

1. 获取级联选择器的内容
   可以通过axios获取数据，并调用接口或本地json数据。
2. 使用级联选择器

         <el-cascader
            v-model="addForm" //绑定的获取级联选择器内容的数组
            :options="goodsList" //通过接口获取到的数据
            expandTrigger="hover" //通过什么事件触发级联选择器
            :props="listForm"    //配置渲染内容   
          ></el-cascader>

        //级联选择器配置对象
         listForm: {
            value: "cat_id", // 相当于唯一标识
            label: "cat_name", // 显示到页面的内容
       // 二三级通过那个属性查找，后边的children就是查找的属性
            children: "children", 
      },

3. 定义button按钮

 <el-button 
 type="primary" //设置按钮颜色
 size="mini"    //设置按钮大小
 :disabled="isBtn" //设置按钮是否禁用
 >按钮</el-button>

4. 判盘级联选择器的双向绑定数组长度

  isBtn() {
  //判断双向绑定的数组长度是否等于3，等于返回true，
       // 不等于返回false
      if (this.addForm.length !== 3) {
        return true;
      } else {
        return false;
      }
    },

注： 判断级联选择器双向绑定数组长度的方法定义在计算属性(computed)中。

总结

初出茅庐，请各位路过的大佬多多指教，谢谢。