vue2使用el-table小结

1. el-table使用fixed固定列之后滚动条失效解决方法

检查el-table是否设置固定高度

循环生成加固定列,导致横向滚动条失效,表格被固定住了 改变这个固定列盒子距底部的距离，致使不遮住滚动条。

解决方法

::v-deep .el-table__fixed { 
  /*  左固定列 */
    height: auto !important;
    /*  改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些,这个根据实际情况改 */
    bottom: 16px; 
  }
::v-deep .el-table__fixed-right { 
  /* // 右固定列 */
      height: auto !important;
      bottom: 16px; 
    }

2.给表格中的图片添加点击或悬浮放大功能

使用el-popover弹出框

<el-table-column align="center" prop="" label="图片地址" width="150">
                    <template slot-scope="scope">
                    
                        <el-popover placement="top-start" trigger="hover">
                            <!--trigger属性值：hover、click、focus 和 manual-->
                            <a :href="scope.row.pic" target="_blank" title="查看最大化图片">
                                <img :src="scope.row.pic" style="width: 500px;height: 500px">
                            </a>
                            <img slot="reference" :src="scope.row.pic" style="width: 100px; cursor:pointer">
                        </el-popover>

                    </template>
                </el-table-column>

3.table表格嵌套下拉选项框

 <el-table-column align="center" label="是否定制" prop="customisation" header-align="center" width="180">
          <template  slot-scope="{row,$index}">
            <el-select v-if="row.edit" v-model="row.customisation" placeholder="请选择">
              <el-option label="是" value="1">是</el-option>
              <el-option label="否" value="0">否</el-option>
            </el-select>
            <span v-else>
              <p v-if="row.customisation==1">是</p>
              <p v-if="row.customisation==0">否</p>
            </span>
          </template>
        </el-table-column>
        
        methods:{
        //修改
      editData(row) {
        row.edit = true;
      },
        }

4. element-ui改变table表格中点选行的颜色（highlight-current-row）

首先使用 highlight-current-row

 <el-table 
      highlight-current-row
      v-loading="loading" :header-cell-style="tableHeaderCellStyle" :cell-style="tableCellStyle"
        :data="Data.filter(data => !search || data.skuId.toLowerCase().includes(search.toLowerCase()))"
        :row-key="row => row.id" :reserve-selection="true"  tooltip-effect="dark" style="width: 100%"
        header-align="center" height="500" border>

然后在app.vue样式中编写一下代码

一定要在App.vue中！！！

/* 用来设置当前页面element全局table 选中某行时的背景色*/

.el-table__body tr.current-row>td{

  background-color: #f19944 !important;

  border: 1px solid #f19944;

  /* 设置文字颜色，可以选择不设置 */

  // color: #f19944;  

}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/

.el-table--enable-row-hover .el-table__body tr:hover>td {

  background-color: #f19944;

  /* 设置文字颜色，可以选择不设置 */

  color: #f19944; 

}