Vue 关于Table的一些操作

最近一直使用element 写前端写一些经常用到的案例

• 合并Table单元格

<el-table  :data="tableData" border :span-method="objectSpanMethod" style="width: 100%">
    <el-table-column  prop="order"  label="序号" align="center" width="50"></el-table-column>
    <el-table-column  prop="name" :label="'名称'"  align="center" fixed="left" width="70"></el-table-column>
</el-table>
<script>
export default {
  name: 'StationsStaTable',
  data () {
    return {
        tableData: [],
    },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // 指定合并的列我只对第一和第二列进行了合并
        if (columnIndex === 1 || columnIndex === 0) {
            if(rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]){
                return {
                    rowspan: 0,
                    colspan: 0
                };
            }else{
                let rows = 1;
                // 查询相同的内容有多少行 进行合并
                for(let i = rowIndex; i < this.tableData.length - 1; i++){
                    if (row[column.property] === this.tableData[i + 1][column.property]) {
                        rows++;
                    }
                }
                // 返回相同内容的行数
                return {
                    rowspan: rows,
                    colspan: 1
                };
            }
        }
      }
 }

• 表头合并
  采用的是结合CSS隐藏的方式

<el-table ref="tableRef" v-loading="loadingTab" class="table" :data="tableData" height="100%"  size="mini" border :span-method="spanMethod" :header-cell-style="headerStyle">
      <el-table-column prop="positionName" label="岗位" width="200px"> </el-table-column>
</el-table>
<script>
export default {
  name: 'StationsStaTable',
  data () {
    return {
        tableData: [],
    },
  methods: {
    headerStyle ({ row, column, rowIndex, columnIndex }: any) {
      // row[2] 是列的下标，从0开始，row[3].colSpan = 0是需要去除的列的下标
      row[2].colSpan = 2
      row[3].colSpan = 0
      if (columnIndex === 3) {
        return 'display: none'
      }
    }
 }