一、elemenetUI二級表頭動態渲染

  1. 開始的時候接到需求寫一個要做一個如圖所示的表格，要求資料表頭動態載入；

       開始拿到這個需求，對我一個後端開發人員來說還是有點難度，百度到一些多級表頭渲染的，但是對後端傳來的格式要求太多，耗費的精力也太多；

       最後參考百度的一篇部落格終於成功渲染，廢話不多說，直接上程式碼；

   2. 後端需要傳來的資料格式          

“listOut”: [
            {
              custNo: '1111',   
              aList: [
                {
                  amountDescription: '一般',  //一級表頭
                  amountList: [
                    {drCrInd: "流入筆數", count: 6}, //{二級表頭，列對應的值}
                    {drCrInd: "流出筆數", count: 1}
                  ]
                },
                {
                  amountDescription: '緊急',
                  amountList: [
                    {drCrInd: "流入筆數", count: 8},
                    {drCrInd: "流出筆數", count: 1}
                  ]
                }
              ]
            },
            {
              custNo: '2222',
              aList: [
                {
                  amountDescription: '一般',
                  amountList: [
                    {drCrInd: "流入筆數", count: 10},
                    {drCrInd: "流出筆數", count: 1}
                  ]
                },
                {
                  amountDescription: '緊急',
                  amountList: [
                    {drCrInd: "流入筆數", count: 5},
                    {drCrInd: "流出筆數", count: 1}
                  ]
                }
              ]
            }
          ];
 

          這種格式對後端開發來說，很簡單，但是前端怎麼去渲染呢，動態載入肯定得用到v-for,只有這樣才能做到動態渲染：

3. 前端程式碼

export default {
name: "FormTest",
data() {
return {
loading: false,
// 表格元件 列表資料物件
tableData: [],
aList: [],
};
},
created() {
this.search();
},
methods: {
search(title) {
this.$axios({
method: 'post',
url: Api.getTranMgData,
}).then((res) => {
this.tableData = res.listOut //將獲得的資料給tableData
this.aList = this.tableData[0]['aList'];
})
}
}

這是前端全部程式碼，三級表頭也如此，只需後端資料格往裡巢狀即可