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

<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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理