antd vue tree table 左侧树 右侧表格 根据树选择筛选

 

 

<template>
  <div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        height: 20rem;
        background: white;
        margin-bottom: 2rem;
      "
    >
      <a-tree
        row-key="index"
        :tree-data="treeData"
        default-expand-all
        style="margin-right: 1rem"
        @select="handleSelect"
      />
      <a-table
        :columns="columns"
        :data-source="tableData"
        size="small"
        :scroll="{ y: 280 }"
        :pagination="false"
      >
        <template v-slot:action>
          <a href="javascript:">Delete</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '首页',
      columns: [
        {
          title: '序号',
          customRender: (t, r, index) => {
            return index + 1
          },
          width: 200,
        },
        {
          title: '用户名',
          dataIndex: 'name',
          width: 100,
        },
        {
          title: '真实姓名',
          dataIndex: 'content',
          width: 100,
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      list: [
        {
          title: '词典分类1',
          key: 'dictionary1',
          scopedSlots: { title: 'custom' },
          children: [],
        },
        {
          title: '词典分类2',
          key: 'dictionary2',
          scopedSlots: { title: 'custom' },
          children: [],
        },
        {
          title: '词典分类3',
          key: 'dictionary3',
          scopedSlots: { title: 'custom' },
          children: [
            {
              title: '子类1',
              key: 'sub1',
              children: [
                {
                  name: '安静',
                  content: '宁静 平静 清静',
                  creater: 'aaa',
                },
                {
                  name: '著名',
                  content: '闻名 知名 有名 盛名',
                  creater: 'aaa',
                },
              ],
            },
            {
              title: '子类2',
              key: 'sub2',
              children: [
                {
                  name: '优雅',
                  content: '典雅 高雅  优雅  淡雅',
                  creater: 'aaa',
                },
                {
                  name: '采购合同',
                  content: '买卖合同 购买合同 订购合同 销售合同',
                  creater: 'aaa',
                },
              ],
            },
          ],
        },
      ],
      tableData: [],
      treeSelected: '',
    }
  },
  computed: {
    // 过滤掉第三层显示tree数据
    treeData() {
      let list = JSON.parse(JSON.stringify(this.list))
      list = list.map((item) => {
        item.children.map((leaf) => {
          delete leaf.children
          return leaf
        })
        return item
      })
      console.log(list)
      return list
    },
  },
  watch: {
    treeSelected(val) {
      this.handleTreeSelected()
    },
  },
  mounted() {
    // 初始化treeSelected 值
    this.treeSelected = this.list[0].key
    this.handleTreeSelected()
  },
  methods: {
    handleSelect(select) {
      this.treeSelected = select[0]
    },
    // 过滤table数据
    handleTreeSelected() {
      const { treeSelected, list } = this
      const _list = JSON.parse(JSON.stringify(list))
      let tableData = []
      let isSelected = false // 是否查询到选中数据
      for (let i = 0; i < _list.length; i++) {
        const { children, key } = _list[i]
        if (key === treeSelected) {
          isSelected = true
          children.forEach((item) => {
            const { children: _children = [] } = item
            if (_children.length > 0) tableData = tableData.concat(_children)
          })
          break
        } else
          children.forEach((item) => {
            const { children = [], key } = item
            console.log(key, treeSelected, children)
            if (key === treeSelected) {
              isSelected = true
              tableData = children
            }
          })
        if (isSelected) break // 查询到 跳出循环
      }
      this.tableData = tableData
    },
  },
}
</script>