element-table实际项目遇见的问题总结

1、解决elementUI中el-table的合计显示的问题

在updated中写入> 前提table需要ref=“table”
this.$nextTick(()=>{
	this.$refs['table'].doLayout();
})

方法	说明
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法

2、给el-table列加上背景颜色

table标签上加:cell-style=“columnStyle”

methods: {
		// 列的背景
		// 隐藏的列不占index,展开index会重新变化
		// 给展开的列加上背景颜色，可以用逆向思维（写死不变的，其他颜色要求变化）
	    columnStyle({ row, column, rowIndex, columnIndex }) {
	           if (columnIndex == 4 || columnIndex == 7) {  
	           // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
	            return 'background:	#FFF8DC;'
	            // return {'background':'#dee1e6','border':'1px solid red'}
	  		  	}
	   	 },
   }

3、element-ui table表格多出一空白列

原因：el-table的宽度是100%,给每一个el-table-column设置宽度之后就会有这个问题
解决方法：删除其中一个el-table-column的宽度 || :width="isShowDetail == '' ? 'auto' : 90"

4、el-table排序

table上面加上 @sort-change=“sortChange” 监听 Table 的 sort-change 事件

<el-table :data="tableData" @sort-change="sortChange">
	//对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序
      <el-table-column  sortable='custom'>
      </el-table-column>
 </el-table>

在methods里面增加sortChange方法

  /**
     * 字段排序
     */
    sortChange(column, prop, order) {
      console.log('字段排序',column,prop,order)
      //ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
    },

5、自定义表头的内容

el-table-column 传入slot=“header”

<el-table-column
                      :key="index"
                      :prop="item.field"
                      :label="item.name"
                      :formatter="formatterData"
                      v-if="hiddenCol(index)"
                      align="center"
                      header-align="center"
                      show-overflow-tooltip
                    >
                    // 自定义表头的内容. 参数为 { column, $index }
                    <span slot="header" slot-scope="{row,column}">
                        <span v-if="条件'" class="样式" @click="点击事件">
                        {{ column.label || 新表头名字 }}
                        </span>
                      </span>
 </el-table-column>

如图：

6、el-table 自定义显示列

el-table-column增加v-if=“hiddenCol(index)”

<el-table-column
                      :key="index"
                      :prop="item.field"
                      :label="item.name"
                      :formatter="formatterData"
                      v-if="hiddenCol(index)"
                      align="center"
                      header-align="center"
                      show-overflow-tooltip
                    >
                    
</el-table-column>

methods里面增加hiddenCol方法

		   /**
           * 自定义显示列
           */
          hiddenCol(index){
          	// 需要显示隐藏或者显示的列
            let colStyleObj = {
              'stock':[3,13],
              '-1stock':[15,25],
              'stockcz':[27,37],
              'sale':[39,42],
              '-1sale':[44,47],
              'salecz':[49,52],
            }
            // 固定不变的列
            let arr = [0,1,2,14,26,38,43,48,53]
            if(arr.includes(index)){
              return true;
            }
            if( index>=colStyleObj['stock'][0] && index<=colStyleObj['stock'][1]){
              return true;
            }
            this.$nextTick(()=>{
              this.$refs['table'].doLayout();
            })
          },

效果图：