最近一直使用element 寫前端寫一些經(jīng)常用到的案例

• 合并Table單元格

<el-table  :data="tableData" border :span-method="objectSpanMethod" style="width: 100%">
    <el-table-column  prop="order"  label="序號(hào)" 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 }) {
        // 指定合并的列我只對(duì)第一和第二列進(jìn)行了合并
        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;
                // 查詢相同的內(nèi)容有多少行 進(jìn)行合并
                for(let i = rowIndex; i < this.tableData.length - 1; i++){
                    if (row[column.property] === this.tableData[i + 1][column.property]) {
                        rows++;
                    }
                }
                // 返回相同內(nèi)容的行數(shù)
                return {
                    rowspan: rows,
                    colspan: 1
                };
            }
        }
      }
 }

• 表頭合并
  采用的是結(jié)合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] 是列的下標(biāo)，從0開始哺眯，row[3].colSpan = 0是需要去除的列的下標(biāo)
      row[2].colSpan = 2
      row[3].colSpan = 0
      if (columnIndex === 3) {
        return 'display: none'
      }
    }
 }