1

elementui 级联选择器

 2 years ago
source link: https://segmentfault.com/a/1190000041087822
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

elementui 级联选择器

发布于 7 分钟前
<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>

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK