element el-cascader 级联选择器多选限制级别

2023-11-10

1 html

<!-- 弹框 -->
      <el-dialog
        @close="resetForm()"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="title2"
        :destroy-on-close="true"
        :visible.sync="dialogFormVisible2"
        width="30%"
      >
        <el-form :rules="rules" :model="form2" ref="ruleForm1">
          <el-form-item label="隶属分类" prop="puuid" label-width="100px">
            <el-cascader
              v-model="form2.puuid"
              :options="newData"
              style="width: 100%"
              :placeholder="form2.zi == '' ? '请选择' : form2.zi"
              clearable
              :props="{
                checkStrictly: true,
                value: 'uuid',
                label: 'name',
                emitPath: false,
              }"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="分类名称" label-width="100px" prop="name">
            <el-input
              @input="form2.name = String(form2.name)"
              v-model="form2.name"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              resetForm();
              dialogFormVisible2 = false;
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="addForm2()">保存</el-button>
        </div>
      </el-dialog>

  :options="newData"   在 data中定义    newData: [],

3   逻辑  例如 在请求中

useTimeList() {
      let url = "/p/articleCate/all";
      this.$axios
        .post(url, this.$qs({ type: 1, flag: 1, uuid: this.form2.uuid }))
        .then((response) => {
          if (response.data.code == 0) {
            this.timeOptions = response.data.data;
            this.parentData = response.data.data;
            this.parentData.unshift({
              name: "顶级分类",
              uuid: 0,
              key: 0,
              puuid: 0,
              level: 1,
            });
            // console.log(this.parentData);
            /*  让无限极联动器 到第3级  */ 
            let arr = JSON.parse(JSON.stringify(response.data.data))
            console.log(arr);
            arr.forEach((item, idx) => {
              console.log(item);
              if(item.children && item.children.length) {
                item.children.forEach((itm, ix) => {
                  if(itm.children && itm.children.length) {
                    delete itm.children
                  }
                })
              }
              this.newData.push(item)
            })
          } else {
            this.$message({
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {});
    },

4  使用循环进行筛选子类

/*  让无限极联动器 到第3级  */ 
            let arr = JSON.parse(JSON.stringify(response.data.data))
            console.log(arr);
            arr.forEach((item, idx) => {
              console.log(item);
              if(item.children && item.children.length) {
                item.children.forEach((itm, ix) => {
                  if(itm.children && itm.children.length) {
                    delete itm.children
                  }
                })
              }
              this.newData.push(item)
            })

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element el-cascader 级联选择器多选限制级别 的相关文章

随机推荐