el-cascader赋值&回显(懒加载并且绑定值为字符串)

<el-cascader :props="props" v-model="value" ref="cascader"></el-cascader>

<script>
  let id = 0;

  export default {
    data() {
      return {
        value: "", //绑定的value(正常为[],本文为"")
        props: {
          emitPath: false,
		  lazy: true,
		  label: "name",
		  value: "id",
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回,通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

重点赋值

watch: {
        //赋值
		value(val) {
			if (val === "xxxxx") {
				setTimeout(() => {
					this.$refs.cascader.presentText =
						"回显的文案";
				}, 50);
			}
		}
        //回显
        //value(val) {
		//		setTimeout(() => {
		//			this.$refs.cascader.presentText =
		//				"接口返回的文案";
		//		}, 50);
		//	}
		//}
	},
methods: {
  handleChange() {
    this.value = "xxxxx"; //主动赋值或者接口的值
  }

}

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值