element-ui中表格el-table__fixed出现白线解决方法

表格列

          <el-table-column
            prop="status"
            align="center"
            label="操作"
            fixed="right"
            width="210"
          >
            <template slot-scope="scope" style="display: flex">
              <el-link style="margin-left: 5px;" type="primary" @click="remark(scope.row)">备注</el-link>
              <el-link style="margin-left: 5px;" type="primary" :disabled="scope.row.status === 'running'" @click="deleteById(scope.row.id, scope.$index)">删除</el-link>
            </template>
          </el-table-column>

出现一条白线

百度方法:添加后没有效果 

    .el-table__fixed, .el-table__fixed-right {
        height: 100% !important;
    }

修改背景色即可

  .el-table__fixed::before, .el-table__fixed-right::before{
    background-color:#485375;
  }

Element UI 的 `el-table` ,可以通过设置 `row-height` 属性来定义每一行的高度。默认情况下,行高是由表格的内容自动撑开的。 如果需要获取行高,可以通过以下两种方式实现: 1. 通过 CSS 获取行高 在 CSS ,可以使用 `height` 属性获取元素的高度。因此,可以通过以下代码获取 `el-table` 所有行的高度: ``` // 获取 el-table 所有行的高度 const rows = document.querySelectorAll('.el-table__row') const rowHeight = rows[0].getBoundingClientRect().height ``` 2. 通过 `el-table` 的 `row-class-name` 属性获取行高 `el-table` 组件提供了 `row-class-name` 属性,可以用来为每一行添加自定义的类名。我们可以通过这个属性来获取行高。 首先,需要在 `el-table` 设置 `row-class-name` 属性,并传入一个函数,函数的参数是行数据对象,函数的返回值是一个字符串,代表这一行的类名。可以在这个函数计算行高,并将行高保存在行数据对象。 例如,我们可以这样实现: ``` <el-table :data="tableData" row-class-name="getRowClassName"> ... </el-table> ``` ``` methods: { getRowClassName(row) { // 计算行高并保存在行数据对象 row.height = 50 return '' } } ``` 然后,在需要获取行高的时候,可以遍历 `el-table` 的数据源,获取每一行的高度: ``` // 遍历 el-table 的数据源,获取每一行的高度 const rows = this.tableData.map(row => row.height) ``` 注意:如果使用第二种方法,需要在行数据对象保存行高,因为 `el-table` 组件会将行数据对象作为 `tr` 元素的 `data` 属性传递给 `render` 函数,而 `render` 函数无法直接访问 `el-table` 组件实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值