快捷導(dǎo)航

使用table做成樹形結(jié)構(gòu)的table

更新時間：2024年07月25日 10:20:42 作者：愛跳舞的程序員

這篇文章主要介紹了使用table做成樹形結(jié)構(gòu)的table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

table做成樹形結(jié)構(gòu)的table

<el-table
			:default-expand-all="false"
			:data="list"
			style="width: 100%; margin-bottom: 20px"
			row-key="listId"
			border
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			lazy
			:load="load"
		>
			<el-table-column prop="bppjName" label="部件名稱"> </el-table-column>
			<el-table-column prop="stkName" label="物資名稱"> </el-table-column>
			<el-table-column prop="stkCode1" label="物資編碼"> </el-table-column>
			<el-table-column prop="stkCode" label="型號規(guī)格"> </el-table-column>
			<el-table-column prop="metric" label="單位" width="80" align="center"> </el-table-column>
			<el-table-column prop="num" label="數(shù)量" width="80" align="center"> </el-table-column>
			<el-table-column prop="note" label="備注"> </el-table-column>
		</el-table>

        getList() {
            // 一開始獲取數(shù)據(jù)列表
			const obj = {
				listId: this.listId,
			};
			getList(obj).then((res) => {
				this.list = res.rows;
				this.list.forEach((item) => {
					// 必須要設(shè)置，不然沒有下級圖標顯示
					item.hasChildren = true;
					item.children = null;
				});
			});
		},
		load(tree, treeNode, resolve) {
            // 獲取下一個節(jié)點數(shù)據(jù) 手動添加上給當前的節(jié)點
			getUdmBppjDataList({ listId: tree.listId }).then((res) => {
				const childList = res.rows;
				childList.forEach((item) => {
                    // 必須要設(shè)置，不然沒有下級圖標顯示
					item.hasChildren = true, 
                    item.children = null;
				});
				setTimeout(() => {
					resolve(childList);
				}, 500);
			});
		},

table樹形結(jié)構(gòu),獲取一個節(jié)點的所有父節(jié)點

數(shù)據(jù)

   let tree = [
    {
        id:1,
      code: '1',
      fsecid:0,
      children: [
        {
          id:11,
          fsecid:1,
          code:'1.1',
          children: [
            {
                id:111,
                fsecid:11,
              code: '1.1.1',
            }
          ]
        },
        {
            id:12,
            fsecid:1,
          code: '1.2',

        }
      ]
    },
    {
      code: '2',
      id:2,
      fsecid:0,
      children: [
        {
            id:21,
            fsecid:2,
          code: '2.1',
        }
      ]
    }
  ]
  let result=scheduleAlgorithm(tree,11,'fsecid','children')
  console.log("result=====",result);
  //結(jié)果  result===== [ 1, 11 ]

標題函數(shù)實現(xiàn)

/**判斷葉子節(jié)點的所有父節(jié)點*/
function scheduleAlgorithm(
  array,//樹形數(shù)據(jù)
  value,//找到valueName屬性名 所等于這個值所有的父節(jié)點,2,3參數(shù)是關(guān)聯(lián)的
  valueName = "fsecid",//與上一節(jié)點相關(guān)聯(lián)的值的字段名,當前節(jié)點的父節(jié)點id
  childrenName = "children",//存放子節(jié)點數(shù)據(jù)的數(shù)組名稱
) {
  if (!value || !Array.isArray(array)) return [];
  const result = [];
  let valid = false;
  const seek = (array, value) => {
    let parentValue = "";
    const up = (array, value, lastValue) => {
      array.forEach(v => {
        const val = v[valueName];
        const child = v[childrenName];
        if (val === value) {
          valid = true;
          parentValue = lastValue;
          return;
        }
        if (child && child.length) up(child, value, val);
      });
    };
    up(array, value);
    if (parentValue) {
      result.unshift(parentValue);
      seek(array, parentValue);
    }
  };
  seek(array, value);
  return valid ? [...result, value] : [];
}