关于vue.js:elementui-级联选择器

49次阅读

共计 1003 个字符，预计需要花费 3 分钟才能阅读完成。

<template>
  <div class="main">
    <el-cascader
     v-model="form.name"
      :props="props"
      options="options"
      @change="changeValue"
    >
    </el-cascader>
  </div>
</template>


<script>
export default {data() {
    return {options: [],
      props: {
        // value: "code",
        // label: "name",
        lazy: true,
        lazyLoad (node, resolve) {const { level} = node;
          //const level = node.level;
          // 申请参数
          const requestData = {};
          if (level === 0) {requestData.type = "province";}
          if (level === 1) {
            requestData.type = "city";
            requestData.code = node.value;
          }
          if (level === 2) {
            requestData.type = "area";
            requestData.code = node.value;
          }          
          getFun(requestData).then(res => {
            const data = res.data;
            if (level === 0) {
              data.forEach(item => {
                item.value = item.code;
                item.label = item.name;
              });
            }
            if (level === 1) {
              data.forEach(item => {
                item.value = item.code;
                item.label = item.name;
              });
            }           
            if (level === 2) {
              data.forEach(item => {
                item.value = item.code;
                item.label = item.name;
                item.leaf = level >= 2;
              });
            }  

            console.log(res);
            // 返回节点数据，具体看返回内容取 res.data.data
            resolve(res.data);
          })
          
        }
      },
    };
  },
  methods: {changeValue(value) {console.log(value.join());
      this.$emit("update:value", value.join());
    }
  },
};
</script>
</style>

正文完