TreeTransfer

Allows selection within a tree structure.

Basic

filterable:

List 1

xxxx自治区

No data

List 2

hl.transfer.noData

The filter function uses the filterNodeMethod defined in treeProps for both the left and right sides.

<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

Parameter	Description	Type	Optional Values	Default Value
model-value / v-model	Bound value	array	—	—
tree-props	Tree properties for the left side. See the Tree component. nodeKey is set to id by default.	object	-	-
titles	Custom list titles	array	-	['List 1', 'List 2']
filter-placeholder	Search box placeholder	string	—	Enter keyword
render-content	Custom data item rendering function. Parameters are: h function; tree node data; left/right identifier. Applies to both sides.	function(h, data, mark)	—	-
filterable	Whether searching is enabled	boolean	—	false

Slots

Name	Description
left-footer	Content at the bottom of the left list
right-footer	Content at the bottom of the right list

Methods

方法名	说明	参数
clearQuery	Clears the search keywords for a specific panel	'left' / 'right', specifies the panel to clear