el-cascader组件区域单选是默认错误解决方法

 强制改为number类型 因为默认你写的数字最终会转换成字符串
 <el-form-item label="区域">
        <el-cascader
          v-model="searchForm.allow_area"
          :options="options"
          :props="props1"
          clearable
          @change="handleChange"
        />
      </el-form-item>


<script setup lang="ts">

// 项目渲染数据时。此处是方便理解
const render = () => {
  searchForm.value.allow_area = Number(
     localStorage.getItem("allow_area")
       ? localStorage.getItem("allow_area")
       : 110000
  )
}

//const props1 = { checkStrictly: true }
//后台不接受数组
/* const handleChange = value => {
  console.log("🚀 ~ handleChange ~ value:", value)
  if (value.length >= 2) {
    searchForm.value.allow_area = value[1]
  } else {
    searchForm.value.allow_area = value[0]
  }
} */
</script>

el-cascader组件可以通过提供一个`lazy`属性来实现异步加载数据的方法。下面是使用`lazy`属性实现el-cascader组件异步加载数据的示例代码: ```vue <template> <el-cascader :options="options" :props="{ lazy: true, lazyLoad: loadOptions }" v-model="selectedOptions" ></el-cascader> </template> <script> export default { data() { return { options: [], // 用于存储级联选择器的选项数据 selectedOptions: [] // 用于存储用户选择的选项 }; }, methods: { loadOptions(node, resolve) { // 异步加载数据的方法 // node是当前需要加载数据的节点对象 // resolve是一个回调函数,用于返回加载到的数据 // 在这里可以根据node的值,向服务器发送请求,获取子级节点的数据 // 假设我们使用axios发送请求来获取子级节点的数据 axios.get(`/api/getOptions?parentId=${node.value}`).then(response => { const data = response.data; resolve(data); }); } } }; </script> ``` 在上面的示例代码中,我们使用了`lazy`属性和`lazyLoad`属性配合使用。`lazy`属性被设置为`true`,表示启用异步加载数据的功能。`lazyLoad`属性被设置为`loadOptions`方法,当组件需要加载数据时,会调用`loadOptions`方法来获取数据。 在`loadOptions`方法中,我们可以根据当前需要加载数据的节点对象`node`的值,向服务器发送请求来获取子级节点的数据。在获取到数据后,通过调用`resolve(data)`来将数据返回给组件,从而展示在界面上。 以上就是使用el-cascader组件实现异步加载数据的方法。希望能对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值