Vue+el-table 修改表格 单元格横线边框颜色及表格空数据时边框颜色

在Vue中使用Element UI的el-table组件时，可以通过CSS覆盖默认的边框样式来修改边框颜色。如果需要修改的是编辑状态下的边框颜色或者表格为空时的边框颜色，可以使用类绑定和数据绑定来动态改变样式。

以下是一个简单的例子，展示如何修改边框颜色：

1. 首先，在Vue组件的<style>标签中添加CSS规则来覆盖默认边框颜色。

/* 修改表格正常状态下的边框颜色 */
.el-table .el-table__body td, .el-table .el-table__header th {
  border-color: #d3dce6; /* 修改为你想要的颜色 */
}
 
/* 修改表格为空时的边框颜色 */
.el-table__empty-block {
  border-color: #d3dce6; /* 修改为你想要的颜色 */
}
 
/* 修改编辑状态下的边框颜色，这里以类.edit-state为例 */
.edit-state .el-table .el-table__body td, .edit-state .el-table .el-table__header th {
  border-color: #409eff; /* 修改为你想要的颜色 */
}

2. 在Vue模板中，根据需要改变的状态绑定相应的类。

<template>
  <div>
    <!-- 表格组件 -->
    <el-table
      :class="{'edit-state': isEditing}"
      :data="tableData"
      style="width: 100%">
      <!-- 列定义 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isEditing: false, // 控制编辑状态
      tableData: [] // 表格数据
    };
  },
  // 其他逻辑...
};
</script>

在上面的例子中，:class="{'edit-state': isEditing}" 根据isEditing的值动态绑定.edit-state类。当isEditing为true时，表格的边框颜色会变更为.edit-state中定义的颜色。同时，对于空数据时的边框颜色，只需确保tableData为空数组，Element UI将会显示空数据的相关提示。