快捷導航

el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的示例代碼

更新時間：2024年09月09日 10:04:08 作者：林中明月間。

本文介紹了使用兩個數(shù)組來實現(xiàn)el-table中表頭的嵌套循環(huán),一個數(shù)組用于循環(huán)表格數(shù)據(jù),另一個用于循環(huán)表頭,幫助讀者更好地理解和應(yīng)用表頭嵌套功能,感興趣的朋友跟隨小編一起看看吧

需求：

不同以前現(xiàn)在需要表頭嵌套循環(huán) 以前只要

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
    </el-table>
  </template>
 data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }]
        }
      }

現(xiàn)在需要表頭嵌套循環(huán)：思路，兩個數(shù)組，一個數(shù)組循環(huán)表格數(shù)據(jù)，一個循環(huán)表頭

<el-table
        ref="pageTable"
        :data="tableData"
        style="margin-top: 15px"
        height="548"
        :header-cell-style="cellStyleFun"
        id="out-table2"
      >
        <el-table-column
          fixed
          label="管轄單位"
          prop="C_NAME"
          :formatter="fmtTableProp"
          align="center"
          width="230"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              style="white-space: pre-wrap"
              @click="detailTree(scope.row)"
              >{{ scope.row.C_NAME }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in tableHeaderData" //單獨循環(huán)表頭-普通循環(huán)
          :key="item"
          :label="item"
          align="center"
          width="140"
        >
          <el-table-column
            label="登錄次數(shù)"
            prop="LOGIN_COUNT"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item].LOGIN_COUNT }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="檢查次數(shù)"
            prop="CHECK_COUNT"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item].CHECK_COUNT }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
js:
tableHeaderData: [], // 頭部列表數(shù)據(jù)
tableData: [], // 列表數(shù)據(jù)
searchFun() {
      this.loading = true;
      const param = this.paramSet();
      workStatisticsByGx(param).then((data) => {
        this.loading = false;
        if (data.data && data.data.code == 10000) {
          this.tableHeaderData = data.data.otherObj;//表頭時間
          this.tableData = data.data.obj;//表格數(shù)據(jù)
        } else {
          this.$confirm(data.data.message || "服務(wù)器忙", "提示", {
            type: "warning",
            center: true,
            customClass: "warn-dialog",
          })
            .then(() => {})
            .catch(() => {});
        }
      });
    },

到此這篇關(guān)于el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)el-table el-table-column嵌套內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: