element ui的table相关样式修改（待补充）

目录

修改滚动条样式

修改某一列样式

修改边框样式

修改鼠标滑动样式（举例为取消滑动后变化）

如何使第一行保持置顶

第一行默认选中，及点击效果

合并表头（貌似只有第一列生效）

禁止表格拖拽

表格合并，在数据已知合并多少的情况下

表格合并，在后端不给合并多少的情况下（有时间补充）

表格中内容复制到检索框后搜索不到内容但是手动输入可以检索

带有选择的table表格（本身有自带的一行选择但是和需求文档不一样改了这种新的）

---

修改滚动条样式

/* //滚动条的宽度 */
::v-deep .table .el-table__body-wrapper::-webkit-scrollbar {
  border: 0;
  width: 6px;
  height: 6px;
}
/* //滚动条的滑块 */
::v-deep .table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #d3d3d3;
  border-radius: 3px;
}

修改某一列样式

//给需要修改的列单独加上class-name名称
//class-name="el-table-lable-box"
        
        
//在CSS之中单独进行样式修改
::v-deep .el-table-lable-box{
  text-align: center;
}

修改边框样式

::v-deep .el-table td{
  padding: 0;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
::v-deep .el-table th.is-leaf{
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
::v-deep .el-table--border{
  border: 1px solid #e4e4e4;
}

修改鼠标滑动样式（举例为取消滑动后变化）

::v-deep .el-table tbody tr:hover>td{
  background-color: transparent;
}

如何使第一行保持置顶

//在开头加一个固定高度即可

第一行默认选中，及点击效果

  watch: {
    // 页面第一次变化时将左面第一个作为高亮
    leftList: {
      handler(newData, oldData) {
        console.log('触发监听')
        this.$nextTick(function() {
          this.$refs.leftList.setCurrentRow(this.leftList[0])
        })
      },
      immediate: true
    }
  },

leftList为数组，因为是将表格写在了子组件所以采用监听，要是父组件的话则写在接口返回数据后面，leftList为表格ref值

 ::v-deep .el-table__body tr.current-row>td {
    background-color: #409eff;
    color: #ffffff;
  }

上面为对应的CSS和HTML

合并表头（貌似只有第一列生效）

如图所示为效果图

 上面为html,附上方法

    // 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (row[0].level === 1) {
        // 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        row[0].colSpan = 0
        row[1].colSpan = 2
        if (columnIndex === 0) {
          return { display: 'none' }
        }
      }
    }

禁止表格拖拽

如图所示加上 :resizable="false"即可

表格合并，在数据已知合并多少的情况下

    // 列表合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 按照后台返回数据进行合并
      // 仅对表格第一列进行合并
      if (columnIndex === 0) {
        return {
          rowspan: row.merge,
          colspan: 1
        }
      }
    }

row.merge是合并的个数，要是不进行合并的话，每条数据后面的这个应该是0

表格合并，在后端不给合并多少的情况下（有时间补充）

表格中内容复制到检索框后搜索不到内容但是手动输入可以检索

el-table会自动过滤空格和换行。原数据中带有连续空格（测__试）,在el-table中显示时，会变成一个空格（测_试），这就导致拿（测_试）检索不到（测__试）

//设置表格样式使其显示空格.
el-table .cell{white-space:pre-wrap}

带有选择的table表格（本身有自带的一行选择但是和需求文档不一样改了这种新的）

在一开始给radio一个空或者1即可。空是默认不选中，1是默认第一个