[BD] 树形筛选的实现

使用Element

<template>

  <el-row :gutter="0">
    <el-col class="user-filter" :span="3"><div class="grid-content ep-bg-purple" />
        <el-input v-model="filterText" placeholder="输入关键词" />
        <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="list.data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
        />
    </el-col>
    <el-col :span="21">
            <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('goods.quick Search Fields') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />
    </div>
    </el-col>

  </el-row>

</template>

<script setup lang="ts">
import { ref, provide, onMounted,watch, reactive  } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { getUserTree } from '/@/api/backend/adminapi'

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(['edit', 'delete'])
const baTable = new baTableClass(
    new baTableApi('/admin/Goods/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false, sortable: true  },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, 'is_switch'],
    },
    {
        defaultItems: { status: '1', type: '1', weight: '0.00', net_weight: '0.00', pack_weight: '0.00', cost_price: '0.000', purchase_price: '0.000', declare_value: '0.00', pack_fee: '0.00', check_stock_type: '0' },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

import { ElTree } from 'element-plus'
interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

let data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
]

    // 尚未解决赋值问题
    let list = reactive({
      data: null,
    });
    getUserTree().then((res) => {
        list.data = res.data.list

    })
    console.log(list);
    

</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { reactify } from '@vueuse/core'
export default defineComponent({
    name: 'goods',
})
</script>

<style scoped lang="scss">
.ba-table-box {
    width: 100%;
}
.default-main {
    margin: 20px 0 0 0;
}
.user-filter {
    // padding: 5px;
    margin-top: 20px;
    padding: 0 5px;
}
</style>