级联 ​

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">服务路径</span>
        <strong>逐级轻触展开选项</strong>
        <el-cascader
          v-model="value"
          clearable
          filterable
          :options="options"
          placeholder="请选择服务类型"
        />
        <p>{{ selectionText }}</p>
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value = ref<string[]>([])

const selectionText = computed(() =>
  value.value.length
    ? `已选择：${value.value.join(' / ')}`
    : '展开后会自动滚动到当前的最新一列。'
)

const options = [
  {
    value: '到家服务',
    label: '到家服务',
    children: [
      {
        value: '即时配送',
        label: '即时配送',
        children: [
          {
            value: '当日送达',
            label: '当日送达',
          },
          {
            value: '预约送达',
            label: '预约送达',
          },
        ],
      },
      {
        value: '到店服务',
        label: '到店服务',
        children: [
          {
            value: '预订餐位',
            label: '预订餐位',
          },
          {
            value: '现场排队',
            label: '现场排队',
          },
        ],
      },
    ],
  },
  {
    value: '居家养护',
    label: '居家养护',
    children: [
      {
        value: '清洁保养',
        label: '清洁保养',
        children: [
          {
            value: '每周上门',
            label: '每周上门',
          },
          {
            value: '深度清洁',
            label: '深度清洁',
          },
        ],
      },
      {
        value: '维修支持',
        label: '维修支持',
        children: [
          {
            value: '水管维修',
            label: '水管维修',
          },
          {
            value: '电路检修',
            label: '电路检修',
          },
        ],
      },
    ],
  },
  {
    value: '健康管理',
    label: '健康管理',
    children: [
      {
        value: '运动课程',
        label: '运动课程',
        children: [
          {
            value: '私教指导',
            label: '私教指导',
          },
          {
            value: '团课预约',
            label: '团课预约',
          },
        ],
      },
      {
        value: '咨询服务',
        label: '咨询服务',
        children: [
          {
            value: '到店咨询',
            label: '到店咨询',
          },
          {
            value: '远程咨询',
            label: '远程咨询',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <el-cascader :options="options" />
</template>

<script lang="ts" setup>
import { cascaderDocOptions } from './options'

const options = [
  { ...cascaderDocOptions[0], disabled: true },
  ...cascaderDocOptions.slice(1),
]
</script>

<template>
  <el-cascader :options="options" clearable />
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'
</script>

<template>
  <el-cascader
    :options="options"
    clearable
    :clear-icon="CloseBold"
    placeholder="使用自定义清空图标"
  />
</template>

<script lang="ts" setup>
import { cascaderSubsetOptions as options } from './options'
import CloseBold from '~icons/ep/close-bold'
</script>

<template>
  <el-cascader :options="options" :show-all-levels="false" />
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'
</script>

<template>
  <div class="m-4">
    <p>显示全部标签，默认模式</p>
    <el-cascader :options="options" :props="props" clearable />
  </div>
  <div class="m-4">
    <p>折叠标签</p>
    <el-cascader :options="options" :props="props" collapse-tags clearable />
  </div>
  <div class="m-4">
    <p>折叠标签并展示提示</p>
    <el-cascader
      :options="options"
      :props="props"
      collapse-tags
      collapse-tags-tooltip
      clearable
    />
  </div>
  <div class="m-4">
    <p>最大折叠标签数</p>
    <el-cascader
      :options="options"
      :props="props"
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="3"
      clearable
    />
  </div>
</template>

<script lang="ts" setup>
import { cascaderRegionOptions as options } from './options'

const props = { multiple: true }
</script>

<template>
  <div class="m-4">
    <p>任意层级可选，单选模式</p>
    <el-cascader :options="options" :props="props1" clearable />
  </div>
  <div class="m-4">
    <p>任意层级可选，多选模式</p>
    <el-cascader :options="options" :props="props2" clearable />
  </div>
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'

const props1 = {
  checkStrictly: true,
}

const props2 = {
  multiple: true,
  checkStrictly: true,
}
</script>

<template>
  <el-cascader :props="props" />
</template>

<script lang="ts" setup>
import type { CascaderProps } from 'element-plus-mobile'

let id = 0
const props: CascaderProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map(() => ({
        value: ++id,
        label: `选项 ${id}`,
        leaf: level >= 2,
      }))
      // 调用 `resolve` 返回子节点数据，并标记当前加载结束。
      resolve(nodes)
    }, 1000)
  },
}
</script>

<template>
  <div class="m-4">
    <p>支持搜索，单选模式</p>
    <el-cascader placeholder="试试搜索：指南" :options="options" filterable />
  </div>
  <div class="m-4">
    <p>支持搜索，多选模式</p>
    <el-cascader
      placeholder="试试搜索：指南"
      :options="options"
      :props="props"
      filterable
    />
  </div>
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'

const props = {
  multiple: true,
}
</script>

<template>
  <el-cascader :options="options">
    <template #default="{ node, data }">
      <span>{{ data.label }}</span>
      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
    </template>
  </el-cascader>
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'
</script>

<template>
  <el-cascader :options="options" filterable placeholder="试试搜索：指南">
    <template #suggestion-item="{ item }">
      <span>🔍 {{ item.pathLabels.join(' > ') }}</span>
    </template>
  </el-cascader>
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'
</script>

<template>
  <el-cascader-panel :options="options" />
</template>

<script lang="ts" setup>
import { cascaderDocOptions as options } from './options'
</script>

<template>
  <div class="m-4">
    <p>使用插槽可以更灵活地控制标签展示。</p>
    <el-cascader :options="options" :props="props" clearable>
      <template #tag="{ data }">
        <el-tag
          v-for="(item, index) in getTags(data)"
          :key="item"
          :color="index % 2 === 0 ? 'var(--el-color-warning-light-7)' : ''"
        >
          {{ item }}
        </el-tag>
      </template>
    </el-cascader>
    <p>仅显示顶层标签</p>
    <el-cascader :options="options" :props="props" clearable>
      <template #tag="{ data }">
        <el-tag v-for="item in getTopLevelTags(data)" :key="item">
          {{ item }}
        </el-tag>
      </template>
    </el-cascader>
  </div>
</template>

<script lang="ts" setup>
import { cascaderRegionOptions as options } from './options'

import type { Tag } from 'element-plus-mobile'

const props = { multiple: true }

const getTags = (data: Tag[]) => {
  return data.map((item) => item.text)
}

const getTopLevelTags = (data: Tag[]) => {
  const set: Set<string> = new Set()
  for (const datum of data) {
    let parent = datum.node?.parent
    while (parent && parent.level !== 1) {
      parent = parent.parent
    }
    const label = parent?.data?.label
    if (label) set.add(label)
  }
  return [...set]
}
</script>

<template>
  <div class="m-4">
    <p>策略：`child`，默认展示所有选中的子节点</p>
    <el-cascader
      v-model="value1"
      :options="options"
      :props="props"
      show-checked-strategy="child"
      clearable
      @change="handleChange1"
    />
  </div>

  <div class="m-4">
    <p>策略：`parent`，当子节点全部选中时仅展示父节点</p>
    <el-cascader
      v-model="value2"
      :options="options"
      :props="props"
      show-checked-strategy="parent"
      clearable
      @change="handleChange2"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { cascaderSubsetOptions as options } from './options'

const value1 = ref([])
const value2 = ref([])
const props = {
  multiple: true,
}

const handleChange1 = (value) => {
  console.log('子节点策略：', value)
}

const handleChange2 = (value) => {
  console.log('父节点策略：', value)
}
</script>

<template>
  <div class="flex flex-col items-center">
    <el-switch
      v-model="showPrefix"
      active-text="显示前缀"
      inactive-text="隐藏前缀"
    />
    <div class="flex flex-wrap">
      <div class="m-4">
        <p>`checkStrictly` 单选模式</p>
        <el-cascader
          v-model="value"
          :options="options"
          :props="props1"
          clearable
        />
      </div>
      <div class="m-4">
        <p>多选模式</p>
        <el-cascader
          v-model="value2"
          show-checked-strategy="parent"
          :options="options"
          :props="props2"
          clearable
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { cascaderSubsetOptions as options } from './options'

const value = ref()
const value2 = ref()
const showPrefix = ref(true)

const props1 = computed(() => ({
  showPrefix: showPrefix.value,
  checkStrictly: true,
  checkOnClickNode: true,
}))
const props2 = computed(() => ({
  showPrefix: showPrefix.value,
  multiple: true,
  checkOnClickNode: true,
}))
</script>

<template>
  <div class="cascader-custom-header-footer">
    <div>
      <p>自定义头部内容</p>
      <el-cascader
        v-model="value"
        popper-class="cascader-custom-header"
        :options="options"
        :props="props"
        clearable
      >
        <template #header>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="indeterminate"
            @change="handleCheckAll"
          >
            全选
          </el-checkbox>
        </template>
      </el-cascader>
    </div>
    <div>
      <p>自定义底部内容</p>
      <el-cascader v-model="value" :options="options" :props="props" clearable>
        <template #footer>
          <el-button link size="small" @click="handleClear"> 清空 </el-button>
        </template>
      </el-cascader>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { cascaderSubsetOptions } from './options'

import type { CascaderOption, CheckboxValueType } from 'element-plus-mobile'

const props = { multiple: true }
const checkAll = ref(false)
const indeterminate = ref(false)
const value = ref<string[][]>([])
const options = ref(cascaderSubsetOptions.slice(0, 1))

const getAllValuePaths = computed(() => {
  const result: string[][] = []
  const queue: { node: CascaderOption; path: string[] }[] = options.value.map(
    (node) => ({ node, path: [node.value as string] })
  )

  while (queue.length > 0) {
    const { node, path } = queue.shift()!
    if (node.children?.length) {
      node.children.forEach((child) => {
        queue.push({ node: child, path: [...path, child.value as string] })
      })
    } else {
      result.push(path)
    }
  }
  return result
})

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === getAllValuePaths.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  value.value = val ? getAllValuePaths.value : []
}

const handleClear = () => {
  value.value = []
}
</script>

<style scoped>
.cascader-custom-header-footer {
  display: flex;
}

.cascader-custom-header-footer > div {
  flex: 1;
  text-align: center;
}

.cascader-custom-header-footer > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.cascader-custom-header .el-checkbox {
  display: flex;
  height: unset;
}
</style>