el-table合并单元格，并显示在前端页面上笔记

最新推荐文章于 2024-04-29 17:54:08 发布

努力的小玖心

最新推荐文章于 2024-04-29 17:54:08 发布

阅读量1.3k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_53121751/article/details/125872007

版权

所需要的页面

表名，表头，注意表头也有合并现象

<el-form ref="formSearch" label-width="100px" style="background: #ffffff;">
    <el-row style="margin-left: 40px;">
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" style="margin-left: 10px;">
        <el-button v-if="approveStatus" type="primary" @click="bankTargetEdit()">编辑</el-button>
        <el-button type="primary" @click="bankTargetDetail()">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <h3 style="text-align: center">xxxx表</h3>
    </el-row>
   <!-- <el-row>
       <h4 style="margin: 5px 20px;text-align: right;">单位：xxxx</h4>
    </el-row> -->
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      :row-class-name="tableRowClassName"
      border
      height="600"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 98%; margin: 0px 20px"
    >
      <el-table-column v-for='(item,index) in titleData' :key='index' :prop='item.value' :label='item.name' :width="item.width" :align="item.align" header-align="center">
        <el-table-column v-for='(item1,index1) in item.children' :key='index1' :prop='item1.value' :label='item1.name' :width="item1.width" :align="item1.align" header-align="center">
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-row style="margin: 5px 20px;text-align: left;">
      <h5>注：标“★”指标为监管评级用到的定量指标。</h5>
    </el-row>
  </el-form>
  <EditMonitorTargetDetail ref="EditMonitorTargetDetail" :monitorTargetDetail="monitorTargetDetail" :visib="dialogVisibleEditMonitorTargetDetail" @handleClose="dialogVisibleEditMonitorTargetDetail = false" @refreshList="refreshList" />
  </div>
</template>

<script>
import { bankMonitorTargetDetailList } from '@/api/bankMonitorTargetApprove.js'
import EditMonitorTargetDetail from "@/views/report/bankMonitorTarget/components/EditMonitorTargetDetail";

export default {
  name: 'ReportDataSource',
  components: {
    EditMonitorTargetDetail
  },
  data() {
    return {
      dialogVisibleEditMonitorTargetDetail : false,
      monitorTargetDetail:{},
      titleData:[],
      year: false,
      approveStatus: '',
      preYear: '',
      pre2Year: '',
      tableData: [],
      targetId: '',
      currentRow:''
    };
  },
  mounted() {
    this.queryList()
    this.titleData =
      [{
        name:'指标类型',
        value:'targetType',
        width:'100'
      },
      {
        name: 'xx',
        value:'frequency',
      },
      {
        name: '指标名称',
        value: 'date',
        children: [
          {
            name:'序号',
            value:'seq',
            width:'60',
            align:'center'
          },{
            name:'指标项',
            value:'targetName',
            width:'300'
          }
        ]
      },
      {
        name: 'xx',
        value:'currentPeriod',
      },{
        name:'xx',
        value:'lastPeriod',
      },{
        name: 'xx',
        value:'previousMonthGradation',
      },{
        name: 'xx',
        value:'initialValueOfTheYear',
      },{
        name: 'xx',
        value:'beginningYearInsert',
      },{
        name: 'xx',
        value:'formerYears',
      },{
        name: 'xx',
        value:'yearOnYearGradation',
      },{
        name: 'xx',
        value:'isArriveTarget',
      },{
        name: 'xx',
        value:'isFullMarks',
      },{
        name:'xx',
        value:'arriveTargetValue',
      },{
        name:'xx',
        value:'fullMarksValue',
      }
      ]
  },

  methods: {

    async queryList(){
      this.targetId = this.$route.query.targetId;
      this.year = this.$route.query.year;
      this.approveStatus = this.$route.query.approveStatus === 0;
      this.preYear = this.year -1;
      this.pre2Year = this.year -2;
      const {code, data} = await bankMonitorTargetDetailList(this.targetId);
      this.tableData = data;
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 && columnIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        }if (rowIndex === 3 && columnIndex === 0) {
          return {
            rowspan: 24,
            colspan: 1
          };
        }
        if (rowIndex === 27 && columnIndex === 0) {
          return {
            rowspan: 10,
            colspan: 1
          };
        }
        if (rowIndex === 37 && columnIndex === 0) {
          return {
            rowspan: 10,
            colspan: 1
          };
        }
        if (rowIndex === 47 && columnIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        }
        if (rowIndex === 50 && columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 1
          };
        }
        if (rowIndex === 51 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        }
        if (rowIndex === 55 && columnIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        }
        else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      /* if(rowIndex === 1){
        if(columnIndex === 1){
          return{
            rowspan: 1,
            colspan: 2
          };
        }else if(columnIndex === 2 ){
          return{
            rowspan: 0,
            colspan: 0
          };
        }
      } */
    },

    tableRowClassName({row, rowIndex}) {
      if (row.importLevel === 2) {
        return 'warning-row';
      }
      if (row.importLevel === 3) {
        return 'success-row';
      }
      if (row.importLevel === 4) {
        return 'error-row';
      }
      return '';
    },

    handleCurrentChange(val) {
      this.currentRow = val;
    },

    bankTargetDetail(){
      this.$router.push({
        path: '/datarecord/bankMonitorTarget',
        query: {
          project: this.$store.state.user.project,
        },
      })
    },

    bankTargetEdit(){
      this.dialogVisibleEditMonitorTargetDetail = true
      const obj = {
        value: this.currentRow,
        year: this.year
      }
      this.$refs.EditMonitorTargetDetail.show(obj);
      this.$emit('handleCustomValue', obj)
    },

    refreshList(){
      window.location.reload()
    }
  }
};
</script>

注意上面的两个el-table-column是嵌套格式，通过嵌套的方式去遍历该表头下的子表头，然后就会实现上面的表格效果图，el-table有一个属性:span-method="objectSpanMethod"然后去写一个objectSpanMethod方法，参数有四个{ row, column, rowIndex, columnIndex }，我这里需要的效果是只有第一列需要合并，所以if判断columnIndex === 0（0索引代表就是第一列）然后里面的if (rowIndex === 0 && columnIndex === 0)就是第一列第一行，然后返回值就是rowspan几行，colspan几列，我这里就只要把3行合并即可，所以rowspan就是3，colspan=1，然后就成了效果图那样，如果是列合并的话就是这样，之后就是你按照自己的格式自己定义就行，如果是行合并的话，我这里也写了一个注释，注释的那个就是行合并，首先定位到第二行，然后将第二，三列的单元合并，但是数据只要第二列的，如果你没有写取消第三列的数据，就会变成这样：

就会发生数据错误，数据往后推迟了一列显示，等你加上排除的else if语句，效果是这样的

只有第二列和第三行合并了，并且第三行数据清除了。所以说记得排除合并后的不需要数据列

行合并就这样做，这样行合并和列合并都讲完了。数据库是正常的，就像excel表格一样，一行一条数据，没有的值是空，像资本充足这样的，在数据库就是第一行有数据，第二行就是空，第三行也是空，这样你合并前三行，然后将第二行和第三行的数据排除，虽然本来就没数据，但是也要写排除语句，避免数据推迟一行显示。

数据库显示图

如果你要做的是行合并和列合并都有，那么就要注意省略数据要写全，继续举例子

if(rowIndex === 1){
        if(columnIndex === 1){
          return{
            rowspan: 2,
            colspan: 2
          };
        }
        else if(columnIndex === 2 ){
          return{
            rowspan: 0,
            colspan: 0
          };
        }
      }else if(rowIndex === 2 && (columnIndex === 1 ||columnIndex === 2)){
        return{
          rowspan: 0,
          colspan: 0
        };
      }

你合并的就是两列两行，然后数据除了第一个单元格的数据，其余全部清除

效果如下