ElementPlus 设置级联选择器父级单选,子级多选

2025-04-06 19:06:02 | 前端Number of visitors 22
<template>
 <ElCascader
   v-model="listQuery.material"
   :options="materialList"
   :props="materialCascaderProps"
    multiple
    collapse-tags
    collapse-tags-tooltip
    clearable
    style="width: 260px"
    @change="materialChange"
 />
</template>

<script setup lang='ts'>
import { ref } from 'vue'

const materialCascaderProps = { multiple: true }
const cascaderTag = ref(-1)
const listQuery = ref({

  effect: '',

})


const materialList = ref([
  {
    value: 1,
    label: '仅是',
    children: [
      {
        value: 0,
        label: '优质'
      },
      {
        value: 1,
        label: '首发'
      },

    ]
  },
  {
    value: 2,
    label: '包含',
    children: [
      {
        value: 0,
        label: '优质'
      },
      {
        value: 1,
        label: '首发'
      },

    ]
  },

])

// 设置级联选择器父级单选,子级多选
const materialChange = (val) => {
  val.forEach((v) => {
    cascaderTag.value = v[0]
  })
  let filterd = val.filter((v) => v[0] == cascaderTag.value)
  listQuery.value.material = filterd
}
</script>



send发送