el-cascader懒加载数据选择完了不会关闭的问题

2022-04-04  本文已影响0人  变量只提升声明不提升赋值
     cascaderProps: {
        label: 'fullname',
        value: 'fullname',
        lazy: true,
        lazyLoad: (node, resolve) => {
          // 通过调用resolve将子节点数据返回,通知组件数据加载完成
          const {level} = node;
          if (level == 0) {
            this.getChilrden().then(res => {
              resolve(res)
            })
          } else {
            const {id} = node.data
            this.getChilrden({id}).then(res => {
              const nodes = res.map((item, index) => {
                return {
                  ...item,
                  leaf: (item.polygon && item.polygon.length > 0) ? null : true   //此字段为null,则表示当前节点为叶子节点,可继续选择。为true则选择器会关闭
                }
              })
              resolve(nodes)
            })
          }
        }
      }
<template>
  <div>
    <!--    修改收货地址-->
    <el-dialog
      :visible.sync="listShow"
      width="80%"
      @close="changeClose"
    >
      <div v-if="!addShow">
        <div class="address-list-header">
          <div class="header-title">修改收货地址</div>
          <el-input
            v-model="param.keyword"
            placeholder="请输入收货人姓名或电话"
            prefix-icon="el-icon-search"
            size="small"
            style="width: 300px;margin-left: 30px"
          >
          </el-input>
          <el-button icon="el-icon-plus" size="small" style="margin-left: 30px" type="text"
                     @click="pushAddress">新增地址
          </el-button>
        </div>
        <div class="address-list">
          <div v-for="item in 4" class="address-list-item">
            <el-radio v-model="radio" :label="item">有赞小金 , 小金 , 18879171667</el-radio>
            <div class="item-group">
              <div class="g_item">修改</div>
              <div class="g_item">删除</div>
            </div>
          </div>
        </div>
      </div>
      <!--      新增收货地址-->
      <div v-else class="add-address">
        <div class="left-form">
          <el-form label-width="100px">
            <el-form-item label="客户名称">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="手机">
              <el-input size="small"></el-input>
            </el-form-item>
            <el-form-item label="区域">
              <el-cascader style="width: 100%" size="small" ref="cascader" v-model="pua" :props="cascaderProps"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input size="small"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="container" class="right-map">

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="listShow = false">取 消</el-button>
    <el-button type="primary" @click="listShow = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "w-address",
  data() {
    this.map = null //地图对象
    this.district = null//省市区功能对象
    return {
      pua: '',
      provinceList: [],//省列表
      radio: 1,
      param: {},
      listShow: false,
      addShow: false,
      map: null,
      cascaderProps: {
        label: 'fullname',
        value: 'fullname',
        lazy: true,
        lazyLoad: (node, resolve) => {
          // 通过调用resolve将子节点数据返回,通知组件数据加载完成
          const {level} = node;
          if (level == 0) {
            this.getChilrden().then(res => {
              resolve(res)
            })
          } else {
            const {id} = node.data
            this.getChilrden({id}).then(res => {
              const nodes = res.map((item, index) => {
                return {
                  ...item,
                  leaf: (item.polygon && item.polygon.length > 0) ? null : true   //此字段为null,则表示当前节点为叶子节点,可继续选择。为true则选择器会关闭
                }
              })
              resolve(nodes)
            })
          }
        }
      }
    }
  },
  methods: {
    changeClose() {
      this.addShow = false
      this.map = null
    },
    pushAddress() {
      this.addShow = true
      this.$nextTick(() => {
        this.map = new TMap.Map('container', {
          zoom: 8,
          center: new TMap.LatLng(40, 116),
        });
      })
    },
    getChilrden(val) {
      if (!this.district) {
        this.district = new TMap.service.District({
          // 新建一个行政区划类
          polygon: 2, // 返回行政区划边界的类型
        });
        return new Promise((resolve => {
          this.getData(val).then(res => {
            resolve(res)
          })
        }))
      } else {
        return new Promise((resolve => {
          this.getData(val).then(res => {
            resolve(res)
          })
        }))
      }
    },
    getData(val) {
      return new Promise((resolve, reject) => {
        if (!val) {
          this.district.getChildren().then(res => {
            this.provinceList = res.result[0]
            resolve(res.result[0])
          })
        } else {
          this.district.getChildren(val).then(res => {
            this.provinceList = res.result[0]
            resolve(res.result[0])
          })
        }
      })
    },
    show() {
      this.listShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.add-address {
  display: flex;

  .left-form {
    width: 30%;
  }

  .right-map {
    margin-left: auto;
    width: 68%;
    height: 500px;
  }
}

.address-list-header {
  display: flex;
  align-items: center;
}

.address-list {
  padding: 20px 0;

  .address-list-item {
    margin-bottom: 10px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item-group {
      display: flex;

      & > div {
        margin-left: 20px;
      }

      .g_item:hover {
        cursor: pointer;
        color: #409EFF;
      }
    }

    &:hover {
      background: #f1f1f1;
      cursor: pointer;
    }
  }
}
</style>

上一篇 下一篇

猜你喜欢

热点阅读