关于el-table列表的一些常用修改

1：鼠标滑过table效果

/deep/ .el-table tbody tr:hover > td {
    background:red !important;
}

 效果如下：

2：隔行背景色与单元格样式：

<el-table>
    :stripe="stripe"
    :header-cell-style="
    {color:'rgb(1 1 1)',
    background:'rgb(196 234 252)',
    'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
</el-table>


/* stripe 是否为斑马纹 table */
/* cell-style 所有单元格设置一样的样式 */
/* header-cell-style 为所有表头单元格设置一样的样式 */

/* 隔行背景色 */
/deep/ .el-table__row--striped td {
    background-color: pink !important;
}

效果如下：

 3：溢出隐藏加鼠标悬停展示

<el-table-column
    align="center"
    show-overflow-tooltip
    label="问卷题项">
        <template>
            <span>
                君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。               
            </span>
        </template>
</el-table-column>

效果如下：

 

4：动态合并列：

后端数据如下：

    <el-table
        :span-method="objectSpanMethod">
        :data="tableData"
    </el-table>
    //span-method	合并行或列的计算方法
    mounted(){
        this.getTable()
    }
    methods: {
        getTable(){
            //省去接口请求......
            //赋值
            this.tableData = res.data
            //回调函数
            this.getSpanArr(this.tableData)
        },
        getSpanArr(data) {
            this.rowNumArr = []//rowNumArr的为一项为需要合并的单元格数和数据tableData一一对应
            data.forEach((item, ind, arr) => {
                if(ind) {
                  // 和上一个对比字段是否需要合并
                  if(item.rootTargetName ===arr[ind-1].rootTargetName){
                    // rowNumArr当前的当前项加一后，要添加一个特殊数据项，用于后续判断显示占横向单元格的数量，可以是0也可以是其他
                  this.rowNumArr[this.inde] += 1
                  this.rowNumArr.push(0)
                  }else{
                    // 不符合合并条件则添加1个单元格进去，并且记录当前下标
                      this.rowNumArr.push(1)
                      this.inde = ind
                  }
                } else {
                  // 第一条数据一定有1个单元格
                  this.rowNumArr.push(1)
                  this.inde = 0
                }
            })
        },
        // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 1 || columnIndex === 2) {
            // 获取当前行的需要合并的单元格数
            const rowNum = this.rowNumArr[rowIndex]
            if (rowNum) {
                // 一个单元格纵向横向合并的单元格数量
                return {
                    rowspan: rowNum, // 纵向合并单元格的数量
                    colspan: rowNum > 0 ? 1 : 0 // 横向合并单元格的数量，纵向单元格数是0的话说明他是被合并的，横向单元格数也就为0不显示了，这里不考虑横向合并所以写死的是1
                };
            } else {
            // 被合并项设置为0，即不显示单元格
              return {
                 rowspan: 0,
                 colspan: 0
              };
            }
           }
         },
    }

效果如下：

5：修改表格数据（双击单元格修改数据）

<el-table-column
    align="center"
    prop="rootTargetWeight"
    label="一级指标权重">
        <template slot-scope="scope">
            <el-input 
                v-focus 
                v-if="scope.row[scope.column.property + 'Show']" 
                clearable v-model="scope.row.rootTargetWeight"
                @keyup.enter.native="onBlurFirst(scope.row, scope.column)"
                @blur="onBlurFirst(scope.row, scope.column)">
            </el-input>
            <span v-else>{{ scope.row.rootTargetWeight }}</span>
        </template>
</el-table-column>
export default{
    data() {
        return {
            key: Math.random(),
            stripe:true,
            rowNumArr:undefined,
            inde:undefined,
        }
    }
}
mathods:{
    //输入框失焦事件
    // 一级指标权重
    onBlurFirst(row, column){
        //由于修改的数据只会让合并列的第一行数据改变，因此循环遍历列表修改相同类型的合并列的其余数据
        this.tableData.map((item)=>{
          if(row.rootTargetCode==item.rootTargetCode){
              item.rootTargetWeight = Number(row.rootTargetWeight)
          }
        })
        //修改原型数据
        row[column.property + 'Show'] = false
        this.updateTable()
    },
    //更新表格
    updateTable() {
        this.key = Math.random()
    },
    
}

效果如下：