【超全】React学习笔记 中：进阶语法与原理机制

html

<el-table :data="finishWork" :row-class-name="tableRowClassName" border :span-method="objectSpanMethod" :header-cell-style="headerStyle" style="width: 100%">
  <el-table-column prop="supervisionType" align="center" label="工作任务" width="140" fixed />
  <el-table-column prop="supervisionProject" align="center" label="工作内容" width="200" fixed></el-table-column>
  <el-table-column prop="content" align="left" width="400">
    <template slot-scope="scope">
      <div v-html="scope.row.content" style="white-space:pre-wrap;"></div>
    </template>
  </el-table-column>
  <el-table-column prop="workImplementation" label="工作落实情况">
    <template slot-scope="scope">
      <el-form-item :prop="'scope.row.details.' + scope.index + '.workImplementation'">
        <el-input type="textarea" autosize v-model="scope.row.workImplementation" :disabled="viewtype" v-if="!viewtype"></el-input>
        <div v-else style="white-space:pre-wrap;" v-html="scope.row.workImplementation" />
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column prop="nextSupervisionPlan" label="下阶段监督计划" width="320">
    <template slot-scope="scope">
      <el-form-item :prop="'scope.row.details.' + scope.index + '.nextSupervisionPlan'">
        <el-input type="textarea" autosize v-model="scope.row.nextSupervisionPlan" :disabled="viewtype" v-if="!viewtype"></el-input>
        <div v-else style="white-space:pre-wrap;" v-html="scope.row.nextSupervisionPlan" />
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column prop="finishStatus" label="工作完成进度" align="center" width="120" fixed="right">
    <template slot-scope="scope">
      <el-form-item :prop="'scope.row.details.' + scope.index + '.finishStatus'">
        <el-select v-model="scope.row.finishStatus" size="small" placeholder="请选择" :disabled="viewtype" v-if="!viewtype">
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="进行中" value="进行中"></el-option>
        </el-select>
        <span v-else>{{ scope.row.finishStatus == '1' ? '已完成' : '进行中' }}</span>
      </el-form-item>
    </template>
  </el-table-column>
</el-table>

js

// 合并表头
headerStyle({ row, column, rowIndex, columnIndex }) {
  const comStyle = {}
  if (rowIndex === 0) {
    // console.log(row)
    row[0].colSpan = 1 // 将表头第二列和第三列合并，内容展示为第二列的内容
    row[1].colSpan = 2
    if (columnIndex === 2) { // 将表头第二列隐藏
      console.log('????')
      return {
        display: 'none',
        ...comStyle
      }
    }
  }
  return comStyle
},
// 合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }, data) {
  if (columnIndex === 0) {
    const data = this.finishWork
    if (rowIndex > 0 && data[rowIndex].supervisionType === data[rowIndex - 1].supervisionType) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      let rowspan = 1
      for (let i = rowIndex + 1; i < data.length; i++) {
        if (data[i].supervisionType === data[rowIndex].supervisionType) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan: rowspan,
        colspan: 1
      }
    }
  }
}

效果(表头有一列不显示了)

打开控制台查看（有数据，但是不显示）

查看css

直接粗暴写法

::v-deep .el-table .el-table__cell.is-hidden > * {
  visibility: visible !important;
}

最终效果

爱意随风起，风止意难平