el-cascader动态加载数据后change事件不触发

最新推荐文章于 2024-06-18 08:41:09 发布

在下大暴雨a

最新推荐文章于 2024-06-18 08:41:09 发布

阅读量2k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_39887277/article/details/131310544

版权

在PC端功能开发中，使用Element-Plus的级联选择器遇到问题，即无论选择哪个级别的数据，change事件都不会触发。原因是二级数据（员工）的字段名与预期不符。通过调整props的value为posid，并在获取员工列表后手动映射数据，确保两层结构有相同的字段名，从而解决了问题。现在，当选择门店时，change事件能正常触发并获取到正确的数据。

摘要由CSDN通过智能技术生成

公司要求在pc端做一个选择门店下员工的功能，我使用到了element-plus的级联选择器，接口有两个，分为门店接口和根据门店查员工接口，接着出现了无论点哪一级的数据都不触发change事件的问题

进入页面时加载第一级的数据，这里返回结果的参数名称分别是shopName，posid

给el-cascader的props如下：

monitorProps: {
          label: 'shopname',
          value: 'posid',
          checkStrictly: props.checkStrictly,
          multiple: props.multiple,
          emitPath: true,
          lazy: true,
          lazyLoad(node, resolve) {
            const { level } = node
            console.log(node.value)
            if (level && node.value) {
              getfollowerlist({ posid: node.value }).then((res) => {
                resolve(res.data)
              })
            }
          },
        },

点击门店后请求第二级也就是员工的数据，返回的字段名有value

由于我设置的props的value有问题，二级菜单并没有posid，所以导致了change事件不触发，解决方法是两层结构需要同样的字段名，这个字段的数据也是最终想要拿到的数据，最终改成了：

monitorProps: {
          label: 'shopname',
          value: 'posid',
          checkStrictly: props.checkStrictly,
          multiple: props.multiple,
          emitPath: true,
          lazy: true,
          lazyLoad(node, resolve) {
            const { level } = node
            console.log(node.value)
            if (level && node.value) {
              getfollowerlist({ posid: node.value }).then((res) => {
                const temp = res.data
                temp.map((item) => {
                  item.posid = item.value
                  item.leaf = true
                })
                resolve(res.data)
              })
            }
          },
        },