vue動態渲染表格的表頭

後臺返回的數據類型如下:

"playerGameBannerObjs": [{
			"id": "119e159f0212412fb5225c572693de63",
			"gameType": "丟你老母川建國",
			"price": 20.00,
			"scales": [{
				"orderNum": 2,
				"scale": "9"
			}, {
				"orderNum": 3,
				"scale": "8"
			}, {
				"orderNum": 5,
				"scale": "7"
			}]
		}, {
			"id": "84aea6416dfc4e7e958056bbb0138876",
			"gameType": "中國臺灣省",
             "price": 20.00,
			"scales": [{
				"orderNum": 0,
				"scale": "9"
			}, {
				"orderNum": 0,
				"scale": "8"
			}, {
				"orderNum": 5,
				"scale": "7"
			}]
		}]

頁面的表格渲染的代碼是:

 <el-table stripe border :data="tableData" height="500">

        <el-table-column label="蔡英文我日你哥狗B">
          <template slot-scope="scope">
            {{scope.row.gameType}}
          </template>
        </el-table-column>

        <el-table-column
          :label="item.scale+'蔡省長'"
            v-for="(item,index) in DynamicColumn"
            :key="index"
          >
          <template slot-scope="scope">
            {{ scope.row.scales[index].orderNum | format }}
          </template>
        </el-table-column>
      </el-table>

監聽變量,重中之重:

 computed: {
      DynamicColumn: function() {
        debugger
        if (this.tableData.length > 0) return this.tableData[0].scales
        return []
      }
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章