快捷導(dǎo)航

如何使用 vxe-table 實現(xiàn)左邊是樹右邊是表格聯(lián)動功能

更新時間：2025年03月28日 08:49:01 作者：可不簡單

使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,當(dāng)需要實現(xiàn)左右兩側(cè)聯(lián)動時,表格 vxe-grid 配合分割模板 vxe-split 就很容易實現(xiàn)了,下面通過實例代碼給大家介紹使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,感興趣的朋友一起看看吧

預(yù)覽

代碼

<template>
  <div>
    <vxe-split height="600" border padding>
      <vxe-split-item width="200" min-width="100">
        <vxe-tree v-bind="treeOptions" @current-change="currentChangeEvent"></vxe-tree>
      </vxe-split-item>
      <vxe-split-item min-width="300">
        <vxe-grid v-bind="gridOptions"></vxe-grid>
      </vxe-split-item>
    </vxe-split>
  </div>
</template>
<script>
import XEUtils from 'xe-utils'
export default {
  data () {
    const treeOptions = {
      transform: true,
      keyField: 'id',
      parentField: 'parentId',
      titleField: 'title',
      nodeConfig: {
        isHover: true,
        isCurrent: true
      },
      data: [
        { title: '節(jié)點(diǎn)2', id: '2', parentId: null },
        { title: '節(jié)點(diǎn)3', id: '3', parentId: null },
        { title: '節(jié)點(diǎn)3-1', id: '31', parentId: '3' },
        { title: '節(jié)點(diǎn)3-2', id: '32', parentId: '3' },
        { title: '節(jié)點(diǎn)3-2-1', id: '321', parentId: '32' },
        { title: '節(jié)點(diǎn)3-2-2', id: '322', parentId: '32' },
        { title: '節(jié)點(diǎn)3-3', id: '33', parentId: '3' },
        { title: '節(jié)點(diǎn)3-3-1', id: '331', parentId: '33' },
        { title: '節(jié)點(diǎn)3-3-2', id: '332', parentId: '33' },
        { title: '節(jié)點(diǎn)3-3-3', id: '333', parentId: '33' },
        { title: '節(jié)點(diǎn)3-4', id: '34', parentId: '3' },
        { title: '節(jié)點(diǎn)4', id: '4', parentId: null },
        { title: '節(jié)點(diǎn)4-1', id: '41', parentId: '4' },
        { title: '節(jié)點(diǎn)4-1-1', id: '411', parentId: '42' },
        { title: '節(jié)點(diǎn)4-1-2', id: '412', parentId: '42' },
        { title: '節(jié)點(diǎn)4-2', id: '42', parentId: '4' },
        { title: '節(jié)點(diǎn)4-3', id: '43', parentId: '4' },
        { title: '節(jié)點(diǎn)4-3-1', id: '431', parentId: '43' },
        { title: '節(jié)點(diǎn)4-3-2', id: '432', parentId: '43' },
        { title: '節(jié)點(diǎn)5', id: '5', parentId: null }
      ]
    }
    const gridOptions = {
      border: true,
      loading: false,
      showOverflow: true,
      height: '100%',
      columns: [
        { field: 'seq', type: 'seq', width: 70 },
        { field: 'name', title: 'Name' },
        { field: 'sex', title: 'Sex' },
        { field: 'age', title: 'Age' }
      ],
      data: []
    }
    return {
      treeOptions,
      gridOptions
    }
  },
  created () {
    this.loadRightList()
  },
  methods: {
    loadRightList () {
      // 模擬后端接口
      this.gridOptions.loading = true
      setTimeout(() => {
        const list = [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
          { id: 10005, name: 'Test5', role: 'PM', sex: 'Man', age: 44, address: 'Shanghai' },
          { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 28, address: 'Guangzhou' },
          { id: 10007, name: 'Test7', role: 'PM', sex: 'Man', age: 46, address: 'test abc' },
          { id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 38, address: 'Shanghai' }
        ]
        this.gridOptions.data = XEUtils.sample(list, XEUtils.random(1, 5))
        this.gridOptions.loading = false
      }, 200)
    },
    currentChangeEvent () {
      this.loadRightList()
    }
  }
}
</script>

https://gitee.com/x-extends/vxe-table

到此這篇關(guān)于使用 vxe-table 來實現(xiàn)左邊是樹，右邊是表格聯(lián)動功能的文章就介紹到這了,更多相關(guān)MySQL JSON 查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: