vue3+element-plus动态渲染级联选择器,重置渲染数据

需求:重置级联选择器

解决方法:在级联中绑定options,在需要重置的地方设置为空(虽然动态渲染的级联选择器根本就不需要  :options=" " 

...一直在试ref绑定各种方法,但是都失败了,反而这样写成功了...

详细代码(这里实现了一个二级级联选择器,根据一级数据选中的数据加载二级数据:

vue3+element-plus动态渲染级联选择器,重置渲染数据_第1张图片

const selectedValues = ref([])//级联可选择数组

const propsCascader = {
    lazy: true, // 开启动态加载子节点
    lazyLoad: cascaderLazyLoad, // 加载动态数据的方法,仅在 lazy 为 true 时有效
}

const cascaderLazyLoad = (node, resolve) => {
    if (node.level === 0) {
        let fitstList = []
        getListOfTask({ projectId: props.projectId, }).then(res => {
            fitstList = res.data.tasks.map((item) => ({
                value: item.taskId,
                label: item.taskName,
                leaf: false
            }))
            resolve(fitstList)
        })
    }
    if (node.level === 1) {
        let secondList = []
        getListOfTask({ projectId: props.projectId, taskId: node.value }).then(res => {
            secondList = res.data.catalogRes.map((item) => ({
                value: item.reportId,
                label: item.reportName,
                leaf: true
            }))
            resolve(secondList)
        })
    }
}
//清除操作
const clear=()=>{
  selectedValues.value = []
}




你可能感兴趣的:(vue.js,elementui,javascript)