element-UI动态生成表格[带分页,以及字典翻译]

动态生成表格

vue文件:


            !-- 表格 --
            el-table  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" {{ showDictValue(scope.row[tableHead[index].columnName],tableHead[index].dictItem) }}/span
                    span v-else {{ 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;idict_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);
    }

 

 

最新回复(0)
/jishuch7gJr5YK1NOUvmi7uslA_2Fuf2xpMCBlq_2BsUjx1k124k_3D3935400
8 简首页