美文网首页
el-cascader懒加载数据选择完了不会关闭的问题

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

作者: 变量只提升声明不提升赋值 | 来源:发表于2022-04-04 10:39 被阅读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>
    
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/yoazlrtx.html