美文网首页
el-table 分页索引排序,高度固定

el-table 分页索引排序,高度固定

作者: 洪锦一 | 来源:发表于2022-04-23 11:18 被阅读0次
<el-table
          :cell-style="{ borderColor: '#cfd7e5', color: '#030303' }"
          @selection-change="handleSelectionChange"
          ref="multipleTable"
          height="700"
          :header-cell-style="headFirst"
          :data="tableData"
          row-key="path"
          border
          :row-class-name="tableRowClassName"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column align="center" label="序号"
            ><el-table-column type="selection" align="right"></el-table-column>
            <el-table-column type="index"  :index="indexMethod"> </el-table-column
          ></el-table-column>
          <el-table-column label="部门" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.SalesWayNanme }}</span>
            </template>
          </el-table-column>
          <el-table-column label="风格" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ProductStyle }}</span>
            </template>
          </el-table-column>
          <el-table-column label="男/女/童装" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.ProductGroup }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工艺" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.Technology }}</span>
            </template>
          </el-table-column>
          <el-table-column label="品类" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.Product }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.CMTPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.CreateDate | DateFilters }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="updataDetail(scope.row)"
                >编辑</el-button
              >
              <span style="margin: 0px 5px">|</span>
              <el-button type="text" size="mini" @click="deleteData(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

索引分页自增累加方法

methods: {
    indexMethod(index) {
      return (
        // 索引分页自增累加,   (当前页-1)*每页显示的条数+table索引+1
        (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
      );
    },
}

相关文章

网友评论

      本文标题:el-table 分页索引排序,高度固定

      本文链接:https://www.haomeiwen.com/subject/kjhaertx.html