快捷導(dǎo)航

el-table?樹形數(shù)據(jù)?tree-props?多層級(jí)使用避坑

更新時(shí)間：2023年08月30日 10:31:54 作者：藍(lán)胖子的多啦A夢(mèng)

本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級(jí)使用避坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)現(xiàn)效果：

element官網(wǎng)提示設(shè)置tree-props為{children: ‘children’,hasChildren: ‘hasChildren’}，data數(shù)據(jù)需要設(shè)置children和hasChildren屬性，row-key也綁定了數(shù)據(jù)的唯一值變量id，但是樹形結(jié)構(gòu)的第三級(jí)就是出不來(lái)

如圖

可以看到只有第二級(jí)，第三級(jí)并沒(méi)有，于是查看了數(shù)據(jù)格式，和官方要求的也是一樣的呢，但是第三層級(jí)就是不展示

最后發(fā)現(xiàn)

在el-table中，支持樹類型的數(shù)據(jù)的顯示。當(dāng) row 中包含 children 字段時(shí)，被視為樹形數(shù)據(jù)。渲染樹形數(shù)據(jù)時(shí)，必須要指定 row-key 。支持子節(jié)點(diǎn)數(shù)據(jù)異步加載。

設(shè)置 Table 的 lazy 屬性為 true 與加載函數(shù) load 。通過(guò)指定 row 中的 hasChildren 字段來(lái)指定哪些行是包含子節(jié)點(diǎn)。 children 與 hasChildren 都可以通過(guò) tree-props 配置。

default-expand-all 屬性表示默認(rèn)展開，不需要展開可以刪除。 row-key="id" 和 row 里面的屬性有 children 字段(即數(shù)據(jù)里面需要有 children 字段) 是必須的，:tree-props="{children: ‘children’,hasChildren: ‘hasChildren’}可有可無(wú)。

如果不是 懶加載 的話，后端不要設(shè)置 hasChildren 這個(gè)屬性，要不然樹形不能顯示；如果是懶加載，則需要設(shè)置 hasChildren 字段。

錯(cuò)誤代碼：

因?yàn)槲业臄?shù)據(jù)不是懶加載，所以不需要添加后面的 hasChildren: 'hasChildren' 配置

并且在組裝數(shù)據(jù)格式時(shí)，也不需要加上 hasChildren=true / hasChildren=false 的字段

完整代碼：

  <!--表格渲染-->
    <el-table
      :header-cell-style="{ color: '#FFF', background: '#333' }"
      :cell-style="{ color: '#FFF', background: '#333' }"
      row-key="id"
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: '', order: '' }"
      @sort-change="sortChange"
      :tree-props="{ children: 'children' }"
    >
      <template slot="empty">
        <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
      </template>
      <el-table-column
        prop="barcode"
        :sortable="true"
        :label="$t('NeoLight.barcodeNo')"
        width="180"
      />
      <el-table-column
        prop="partNumber"
        :sortable="true"
        label="料號(hào)"
        width="150"
      />
      <el-table-column
        prop="warehouseCode"
        :sortable="true"
        label="庫(kù)別"
        width="150"
      />
      <el-table-column
        prop="batch"
        :sortable="true"
        :label="$t('barcode.batch')"
      />
      <el-table-column
        prop="provider"
        :sortable="true"
        :label="$t('storagePos.providerNumber')"
      />
      <el-table-column
        prop="posName"
        :sortable="true"
        :label="$t('NeoLight.storageNo')"
      />
      <el-table-column prop="dateCode" :sortable="true" label="DC" />
      <el-table-column prop="reelAmount" :sortable="true" label="卷數(shù)" />
      <el-table-column
        prop="amount"
        :sortable="true"
        :label="$t('NeoLight.amount')"
      />
      <el-table-column
        prop="firstPutInDate"
        :sortable="true"
        :label="$t('NeoLight.firstPutInDate')"
      />
      <el-table-column
        prop="putInDate"
        :sortable="true"
        :label="$t('NeoLight.putInDate')"
      />
    </el-table>

接口返回的數(shù)據(jù) 為 二級(jí) 數(shù)據(jù)格式 但是table表格中要展示 三個(gè)層級(jí) 需要前端自己來(lái)處理組裝需要的格式（有和我一樣的小伙伴，可以讓后端組裝好格式返回噢）

 let list = [
 {
	canCheckOutTime: 1669613688280
	enabled: true
	groupId: ""
	groupName: ""
	h: 8
	humidity: ""
	id: "21"
	labelId: ""
	labelName: ""
	posName: "C1"
	priority: 1
	storageId: "1"
	temperature: ""
	used: true
	w: 7
	warmPos: false
},
    {
          barcode: {
            amount: 23000,
            barcode: "CS0004",
            batch: "",
            children: [
              {
                amount: 3000,
                barcode: "M150171314022J1RV",
                batch: "A436105244",
                createDate: "2022-12-01 15:55:32",
                dateCode: "2209",
                firstPutInDate: "2022-12-01 15:55:33",
                fullCode:
                  "152S01563-017131|A436105244-2209|3000|M150171314022J1RV|TAIYO|4101546111011J1007FS",
                height: 8,
                id: "92",
                initialAmount: 0,
                labelAmount: 3000,
                maxStorageTime: 0,
                mixTime: 0,
                onlySingleOut: false,
                partNumber: "152S01563",
                partitionCount: 1,
                plateSize: 7,
                posName: "CS0004-1",
                provider: "TAIYO",
                providerNumber: "017131",
                putInDate: "2022-12-01 15:55:33",
                putInTime: 1669881333306,
                putInTimeStr: "2022-12-01 15:55:306",
                reelAmount: 1,
                relationCodes: [],
                size: "7X8",
                solder: false,
                solderStatus: 0,
                startWarmTime: -1,
                status: 0,
                thickness: "",
                type: 0,
                updateDate: "2022-12-01 15:55:33",
                used: false,
                usedCount: 0,
                warehouseCode: "W10B",
                warmTime: 0,
              },
              {
                amount: 10000,
                barcode: "A1179700142220JB6S",
                batch: "TPA2233000KP",
                createDate: "2022-12-01 15:56:01",
                dateCode: "2022080",
                firstPutInDate: "2022-12-01 15:56:02",
                fullCode:
                  "118S0176-797001|TPA2233000KP-20220807|10000|A1179700142220JB6S|CYNTEC|TPA2233000KP0000JB6S",
                height: 8,
                id: "95",
                initialAmount: 0,
                labelAmount: 10000,
                maxStorageTime: 0,
                mixTime: 0,
                onlySingleOut: false,
                partNumber: "118S0176",
                partitionCount: 2,
                plateSize: 7,
                posName: "CS0004-2",
                provider: "CYNTEC",
                providerNumber: "797001",
                putInDate: "2022-12-01 15:56:02",
                putInTime: 1669881362306,
                putInTimeStr: "2022-12-01 15:56:306",
                reelAmount: 1,
                relationCodes: [],
                size: "7X8",
                solder: false,
                solderStatus: 0,
                startWarmTime: -1,
                status: 0,
                thickness: "",
                type: 0,
                updateDate: "2022-12-01 15:56:02",
                used: false,
                usedCount: 0,
                warehouseCode: "W10B",
                warmTime: 0,
              },
              {
                amount: 10000,
                barcode: "A1179700142220JB7L",
                batch: "TPA2233000KP",
                createDate: "2022-12-01 15:56:06",
                dateCode: "2022080",
                firstPutInDate: "2022-12-01 15:56:07",
                fullCode:
                  "118S0176-797001|TPA2233000KP-20220807|10000|A1179700142220JB7L|CYNTEC|TPA2233000KP0000JB7L",
                height: 8,
                id: "96",
                initialAmount: 0,
                labelAmount: 10000,
                maxStorageTime: 0,
                mixTime: 0,
                onlySingleOut: false,
                partNumber: "118S0176",
                partitionCount: 2,
                plateSize: 7,
                posName: "CS0004-2",
                provider: "CYNTEC",
                providerNumber: "797001",
                putInDate: "2022-12-01 15:56:07",
                putInTime: 1669881367304,
                putInTimeStr: "2022-12-01 15:56:304",
                reelAmount: 1,
                relationCodes: [],
                size: "7X8",
                solder: false,
                solderStatus: 0,
                startWarmTime: -1,
                status: 0,
                thickness: "",
                type: 0,
                updateDate: "2022-12-01 15:56:07",
                used: false,
                usedCount: 0,
                warehouseCode: "W10B",
                warmTime: 0,
              },
            ],
            createDate: "2022-12-01 15:55:05",
            firstPutInDate: "2022-12-01 16:29:47",
            fullCode: "CS0004-1",
            height: 8,
            id: "90",
            initialAmount: 0,
            labelAmount: 0,
            maxStorageTime: 0,
            mixTime: 0,
            onlySingleOut: false,
            outOpor: "",
            partNumber: "CS",
            partitionCount: 0,
            plateSize: 7,
            posName: "B19",
            putInDate: "2022-12-02 14:05:57",
            putInTime: 1669883387333,
            putInTimeStr: "2022-12-01 16:29:333",
            reelAmount: 3,
            relationCodes: [],
            size: "7X8",
            solder: false,
            solderStatus: 0,
            startWarmTime: -1,
            status: 0,
            subCodeList: [
            ],
            thickness: "",
            type: 0,
            updateDate: "2022-12-02 14:05:57",
            used: true,
            usedCount: 4,
            usedDate: "2022-12-01 17:03:30",
            warmTime: 0,
          },
          canCheckOutTime: 1669961157870,
          enabled: true,
          groupId: "",
          groupName: "",
          h: 8,
          humidity: "",
          id: "59",
          labelId: "",
          labelName: "",
          posName: "B19",
          priority: 19,
          storageId: "3",
          temperature: "",
          used: true,
          w: 7,
          warmPos: false,
        },
      ];

可以看出

有的數(shù)據(jù)中沒(méi)有 children 字段，有的有 children 字段后端返回的樹形結(jié)構(gòu)數(shù)據(jù)一個(gè) 二級(jí)數(shù)據(jù)格式 ，還需要前端處理，將 children 中每一條數(shù)據(jù)里的 posName 字段值取出來(lái) 并賦值給一個(gè) barcode 的新字段加上id 組成第二級(jí)數(shù)據(jù)，后端返回的 第二層級(jí)數(shù)據(jù) 作為樹形結(jié)構(gòu)的 第三層級(jí)數(shù)據(jù) 使用

js代碼

  methods: {
  //從接口中獲取數(shù)據(jù)
    getList() {
      let data = this.query;
      outerInventory(data).then((res) => {
        this.pageLength = res.totalElements;
        this.changeTableJson(res.content); //調(diào)用組裝數(shù)據(jù)方法
      });
    },
    // 組裝表格需要的數(shù)據(jù)格式
    changeTableJson(listArray) {
      if (!this.isLoading) {
        const list2 = [];
        for (let jsonElement of listArray) {
          if (!jsonElement.barcode || !jsonElement.barcode.children) {
            list2.push(jsonElement);
            continue;
          }
          jsonElement.barcode.children = jsonElement.barcode.children.map(
            (item) => {
              if (item.barcode) {
                let temp = JSON.parse(JSON.stringify(item));
                return {
                  id: Math.floor(Math.random() * 1000) + "",
                  barcode: item.posName,
                  children: [temp],
                };
              }
            }
          );
          list2.push(jsonElement.barcode);
        }
        this.tableData = list2;
        this.isLoading = true;
        console.log(list2);
      }
    },
}

三級(jí)樹形結(jié)構(gòu) 官方例子

<el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'children'}">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

data() {
    return {
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄',
        children: [
          {
            id: 31,
            date: '2020-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
            children: [
              {
                id: 33,
                date: '2020-05-32',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄'
              }
            ]
          },
          {
            id: 32,
            date: '2020-05-32',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
            children: [
              {
                id: 34,
                date: '2020-05-32',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄'
              }
            ]
          }
        ]
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄',
      },
      {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    }
  },

實(shí)現(xiàn)效果

到此這篇關(guān)于el-table 樹形數(shù)據(jù) tree-props 多層級(jí)使用避坑的文章就介紹到這了,更多相關(guān)el-table tree-props 多層級(jí)使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: