cascader 动态加载 回显_vue+element cascader联选择器三级类目 动态加载

979cf43a9fcfa1096fd8396f458acf7e.png

当选中某一级时,动态加载该级下的选项。

html代码 框里面只显示三级类目 删除:show-all-levels="false" 就会显示全部路径

<el-form-item label="商品类目:" v-if="navstate==-1">
    <el-cascader v-model="preSearchForm.class" :props="props" :show-all-levels="false"></el-cascader>
 </el-form-item>

js代码 buckleTemplateNext 类目接口名 props 是放在data里面

props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level,value } = node;
            buckleTemplateNext({pid:value || 0}).then(res=>{
              console.log(res)
              const nodes = res.map(x=>({
                value: x.id,
                label: x.name,
                leaf: level >= 2
              }))
              resolve(nodes)
            })
          }
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 中,可以使用 `<script lang="ts" setup>` 来编写组件,并使用 `ref` 来获取组件中的数据和方法。下面是 el-cascader 动态加载回显Vue3 + TypeScript + `<script lang="ts" setup>` 的实现方式: ```vue <template> <el-cascader v-model="defaultValue" :options="options" :props="props" @change="handleChange" ></el-cascader> </template> <script lang="ts" setup> import { ref, onMounted } from 'vue' interface CascaderOption { label: string; value: string; children?: CascaderOption[]; } const defaultValue = ref<string[]>([]); const options = ref<CascaderOption[]>([ { label: 'Option 1', value: '1', children: [] } ]); const props = { lazy: true, lazyLoad: loadNode }; function handleChange(value: string[]) { console.log('Selected: ', value); } async function loadNode(node: CascaderOption, resolve: (nodes: CascaderOption[]) => void) { const children = await fetchChildren(node.value); const options = children.map(item => { return { label: item.name, value: item.id, children: item.children ? [] : undefined } }) resolve(options); } async function fetchChildren(value: string) { // 根据 value 的值,通过接口获取子节点数据 const response = await fetch('url?id=' + value); const data = await response.json(); return data.children; } onMounted(async () => { // 获取回显数据 const response = await fetch('url/echo'); const data = await response.json(); defaultValue.value = data; }); // 将 defaultValue、options 和 props 暴露出去,以便在模板中使用 export default { defaultValue, options, props, handleChange, loadNode }; </script> ``` 在上面的代码中,我们使用 `ref` 来定义 `defaultValue` 和 `options` 变量,分别用于存储回显数据和级选择器的选项数据。然后,我们定义了 `loadNode` 方法,用于动态加载子节点数据,并将其作为 `lazyLoad` 属性传递给 el-cascader 组件。在 `onMounted` 钩子函数中,我们通过接口获取回显数据,并将其赋值给 `defaultValue` 变量。最后,我们将 `defaultValue`、`options` 和 `props` 暴露出去,以便在模板中使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值