el-cascader多选城市多选怎么处理

el-cascader组件可以通过设置checkStrictly属性来实现父子节点不关联，从而实现勾选子节点时不对应父节点的需求。对于多选城市的情况，可以通过以下步骤来处理：

1. 在el-cascader组件中设置checkStrictly属性为true，表示父子节点不关联。
2. 在数据源中为每个节点添加一个isChecked属性，用于记录节点是否被选中。
3. 在change事件中，遍历所有节点，如果当前节点被选中，则将其所有父节点的isChecked属性设置为true；如果当前节点被取消选中，则将其所有子孙节点的isChecked属性设置为false。
4. 在提交表单时，遍历所有节点，将isChecked属性为true的节点的值添加到表单中。

代码示例：

<el-cascader
  v-model="selectedCities"
  :options="cityOptions"
  :props="props"
  :check-strictly="true"
  @change="handleCityChange"
></el-cascader>

data() {
  return {
    cityOptions: [
      {
        value: 'Beijing',
        label: '北京',
        children: [
          {
            value: 'Dongcheng',
            label: '东城区',
            children: [
              {
                value: 'Dongzhimen',
                label: '东直门',
                isChecked: false
              },
              {
                value: 'Wangfujing',
                label: '王府井',
                isChecked: false
              }
            ]
          },
          {
            value: 'Haidian',
            label: '海淀区',
            children: [
              {
                value: 'Zhongguancun',
                label: '中关村',
                isChecked: false
              },
              {
                value: 'Wudaokou',
                label: '五道口',
                isChecked: false
              }
            ]
          }
        ]
      },
      {
        value: 'Shanghai',
        label: '上海',
        children: [
          {
            value: 'Pudong',
            label: '浦东新区',
            children: [
              {
                value: 'Lujiazui',
                label: '陆家嘴',
                isChecked: false
              },
              {
                value: 'Zhangjiang',
                label: '张江',
                isChecked: false
              }
            ]
          },
          {
            value: 'Xuhui',
            label: '徐汇区',
            children: [
              {
                value: 'Xujiahui',
                label: '徐家汇',
                isChecked: false
              },
              {
                value: 'Caohejing',
                label: '漕河泾',
                isChecked: false
              }
            ]
          }
        ]
      }
    ],
    selectedCities: [],
    props: {
      value: 'value',
      label: 'label',
      children: 'children',
      isChecked: 'isChecked'
    }
  }
},
methods: {
  handleCityChange(value, selectedOptions) {
    // 遍历所有节点，更新isChecked属性
    this.cityOptions.forEach(option => {
      this.updateNodeChecked(option, value, selectedOptions)
    })
  },
  updateNodeChecked(node, value, selectedOptions) {
    if (selectedOptions.length === 0) {
      // 如果没有选中的节点，则将所有节点的isChecked属性设置为false
      node.isChecked = false
    } else if (selectedOptions.indexOf(node) !== -1) {
      // 如果当前节点被选中，则将其所有父节点的isChecked属性设置为true
      node.isChecked = true
      let parentNode = node.parent
      while (parentNode) {
        parentNode.isChecked = true
        parentNode = parentNode.parent
      }
    } else {
      // 如果当前节点未被选中，则将其所有子孙节点的isChecked属性设置为false
      node.isChecked = false
      if (node.children) {
        node.children.forEach(child => {
          this.updateNodeChecked(child, value, selectedOptions)
        })
      }
    }
  }
}