element表格攻略大全,表头合并,表格合并,动态添加一列

elementui表格攻略大全,表头合并,表格合并,动态添加一列

element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构

[
        {
          fuelType: '固体燃料(吨)',
          fuelVarieties: '无烟煤',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        },
        {
          fuelType: '固体燃料(吨)',
          fuelVarieties: '烟煤',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        },
        {
          fuelType: '固体燃料(吨)',
          fuelVarieties: '褐煤',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        },
        {
          fuelType: '固体燃料(吨)',
          fuelVarieties: '洗精煤',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        },
        {
          fuelType: '固体燃料(吨)',
          fuelVarieties: '其他洗煤',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        },
        {
          fuelType: '固体燃料(吨)',
          fuelVarieties: '其他煤制品',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        },{
          fuelType: '固体燃料(吨)',
          fuelVarieties: '集类',
          unitCalorific: '',
          oxidationRate:'',
          calorificPower:'',
          id:'',
          standard:""
        }]

写完数据结构之后给表格绑定一个内置方法

    <el-table :data="tableData"  //数据源
              :span-method="objectSpanMethod"  //合并动态列
              :header-cell-style="headMerge"  //合并动态表头
              :cell-style="{ textAlign: 'center' }"
    >

先写合并动态列的方法,这样他就会把表格来个对应的单元格合并了,注意是合并fuelType

  getSpanArr (data) {
      //data就是数据源 需要在creatd 或者mounted调用一下传进去
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].fuelType === data[i - 1].fuelType) { //fuelType可以根据你要合并的列更改
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
       objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },

接下来就是合并表头了,要不然显示很难看,我的表头把俩个子类方在一个大类里然后隐藏俩个子类,如果有好的办法欢迎探讨

//html部分 
<el-table-column prop="content" >
        <template slot="header">
          <p class="Fueltype">燃料品种</p>
        </template>
        <el-table-column prop="fuelType"  width="200px" >
          <template slot-scope="scope">
            <p >{{scope.row.fuelType}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="fuelVarieties" width="200px" label="22">
          <template slot-scope="scope">
            <p >{{scope.row.fuelVarieties}}</p>
          </template>
        </el-table-column>
      </el-table-column>
//js部分
    headMerge({ row, column, rowIndex, columnIndex }) {
      if(rowIndex==1){
        return { display: 'none' };
      }
      return {textAlign: 'center'};
    },

表格的头部合并和内部合并就完成了 下面需求就是动态添加一列,由于是动态列,就把月份和总数写死,其他的数据动态添加,dynamicColumns是循环的表头数据

<el-table ref="myTable" :data="tableData" border style="width: 100%"  :header-cell-style="{textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }">
      <el-table-column prop="month" label="月份" fixed width="100px"/>
      <!-- 动态列 -->
      <el-table-column
        v-for="(item, index) in dynamicColumns"
        :key="index"
        :prop="item.prop"
      >
        <!-- label -->
        <template slot="header" slot-scope="scope">
          {{ item.label }}
          <i
            :disabled="checkitemdata.isdetail"
            class="el-icon-remove"
            style="color: red; cursor: pointer;"
            @click="deleteColunm(index)" //删除一列
          />
          <i
            :disabled="checkitemdata.isdetail"
            class="el-icon-edit"
            style="color: red; cursor: pointer;"
            @click="changerowTitle(index,scope.row,item)"  //编辑一列
          />
        </template>
        <!-- prop -->
        <template slot-scope="scope">
          <el-input
            v-if="isEdit"
            v-model="scope.row.custom[item.prop]"
            type="number"
            title=""
            class="customNumber"
            size="mini"
            placeholder="请输入"
            @input="changeInputValue(scope)"
            :disabled="checkitemdata.isdetail"
          />
          <span v-else>{{ scope.row.custom[item.prop] }}</span>
        </template>
      </el-table-column>

      <!-- 合计列 -->
      <el-table-column
        prop="summary"
        label="合计"
        fixed="right"
        width="100"
      />
    </el-table>

数据结构是这样的

 			{month: "1", custom: {xxx: 1}, summary: 1},
             {month: "3", custom: {xxx: 2}, summary: 2},
             {month: "4", custom: {xxx: 3}, summary: 3},
             {month: "5", custom: {xxx: 4}, summary: 4},
             {month: "6", custom: {xxx: 5}, summary: 5},
             {month: "7", custom: {xxx: 6}, summary: 6},
             {month: "8", custom: {xxx: 7}, summary: 7}],

点击添加时候给dynamicColumns添加一项就可以了

this.$prompt('请输入页签表头', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnPressEscape:false,
        closeOnClickModal:false,
        inputValidator: this.tabCheck
      }).then(({value}) => {
        this.dynamicColumns.push({
          prop: value,
          label: value
        })
        ActionUtils.success('操作成功')
      }).catch(re=>{
        console.log(re)
      })

有问题欢迎留言