TreeTransfer 树形穿梭框

可以对树形结构进行选择。

基础用法

filterable:

List 1

xxxx自治区

No data

List 2

hl.transfer.noData

过滤函数左右侧同时使用treeProps里面定义的filterNodeMethod

<template>
  <p>filterable: <el-checkbox v-model="filterable" /></p>
  <epp-tree-transfer v-model="value" :filterable="filterable" :tree-props="treeProps" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

const filterNode = (value: string, data: { label: string }) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

const value = ref(['2']);
const filterable = ref(true);
const treeProps = reactive({
  nodeKey: 'id',
  checkStrictly: true,
  showCheckbox: false,
  filterNodeMethod: filterNode,
  data: [
    {
      label: 'xxxx自治区',
      id: '1',
      childrens: [
        {
          label: '城市1',
          id: '2',
          childrens: [
            { label: '区域1', id: '7', childrens: [] },
            { label: '区域2', id: '8', childrens: [] },
            {
              label: '县级1',
              id: '9',
              childrens: [
                {
                  label: '测试乡镇测试乡镇测试乡镇测试乡镇测试乡镇测试乡镇测试乡镇',
                  id: '8-1',
                  childrens: [],
                },
                { label: '测试乡镇2', id: '8-2', childrens: [] },
                { label: '测试乡镇3', id: '8-3', childrens: [] },
              ],
            },
          ],
        },
        {
          label: '城市2',
          id: '3',
          disabled: true,
          childrens: [
            {
              label: '区域1',
              id: '10',
              disabled: true,
              childrens: [],
            },
            {
              label: '区域2',
              id: '11',
              disabled: true,
              childrens: [],
            },
            {
              label: '区域3',
              id: '12',
              disabled: true,
              childrens: [],
            },
          ],
        },
        { label: '城市3', id: '4', childrens: [] },
        { label: '城市4', id: '5', childrens: [] },
        { label: '城市5', id: '6', childrens: [] },
      ],
    },
  ],
  props: {
    children: 'childrens',
    label: 'label',
  },
});
</script>

Attributes

参数	说明	类型	可选值	默认值
model-value / v-model	绑定值	array	—	—
tree-props	左侧树属性，参见 Tree 组件，nodeKey默认设置为id	object	-	-
titles	自定义列表标	array	-	['列表 1', '列表 2']
filter-placeholder	搜索框占位	string	—	请输入搜索内容
render-content	自定义数据项渲染函，参数分别为：h 函数；树节点数据；left/right 标识。同时适用两侧	function(h, data, mark)	—	-
filterable	是否可搜	boolean	—	false

Slots

名称	说明
left-footer	左侧列表底部的内容
right-footer	右侧列表底部的内容

Methods

方法名	说明	参数
clearQuery	清空某个面板的搜索关键词	'left' / 'right'，指定需要清空的面板