element-UI动态生成表格【带分页，以及字典翻译】

动态生成表格

vue文件：

            <!-- 表格 -->
            <el-table style="width: 100%" border :data="tableData">
              <template v-for="(item,index) in tableHead">
                <el-table-column
                  :key="index"
                  :prop="item.columnName"
                  :label="item.labelText"
                >
                  <template slot-scope="scope">
                    <span v-if="tableHead[index].dictItem" style="margin-left: 10px">{{ showDictValue(scope.row[tableHead[index].columnName],tableHead[index].dictItem) }}</span>
                    <span v-else style="margin-left: 10px">{{ scope.row[tableHead[index].columnName] }}</span>
                  </template>
                </el-table-column>
              </template>
              <el-table-column
                fixed="right"
                label="操作"
                width="100"
              >
                <template slot-scope="scope">
                  <el-button size="small" type="text" @click="handleClick(scope.row)">查看明细</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>

ts文件：【这里使用的是TS不是JS，写法略有不同。】

    //data

    // 表头数据
    tableHead = [];
    // 表格数据
    allTableData=[];
    tableData=[];

    //分页
    pageSize=20;
    total = 0;
    currentPage = 1;

    // methods
     /**
     * 查询表格内容
     */
    async clickNode(data) {
        this.nodeData = data;
        this.tableHead = [];
        this.tableData = [];
        if (this.nodeData.funcId != undefined) {
            this.funcId=this.nodeData.funcId;
            this.funcName=this.nodeData.funcName;
            this.showOldValue=this.nodeData.showOldValue;
            let nowparam = {funcId:this.funcId, queryType:this.reqtype};
            const ret =await httpClient.post(API.qry_query_funcinfo, nowparam);
            this.tableHead = ret.data[0]
            this.total = ret.data[1].length;
            this.allTableData = ret.data[1]
            this.tableData = this.allTableData.slice(0, this.pageSize);
            this.currentPage = 1;
        }
    };    

    /**
     * 动态表格字典翻译
     */
    showDictValue(val,dictnum){
      var dict_val= dict$.getOpts(dictnum);
      
      for (var i=0;i<dict_val.length;i++)
      {
        if (val == dict_val[i].dictItem) {
          return dict_val[i].dictItemName
        } 
      }
    }

    /**
     * 页码改变
     * @param page 当前页码
     */
    handleCurrentChange(page) {
      this.tableData = this.allTableData.slice(
        (page - 1) * this.pageSize,
        page * this.pageSize
      );
    }
    /**
     * 每页显示数据长度改变
     */
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.tableData = this.allTableData.slice(0, pageSize);
    }