el-table 样式自定义

流氓也是种气质 _Cookie

已于 2023-03-28 11:50:41 修改

阅读量2k

点赞数 1

分类专栏： elment-ui使用记录文章标签： vue.js css html el-table

于 2021-10-08 17:07:42 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/120655178

版权

elment-ui使用记录专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.el-table 样式自定义

效果图:

// tableRowClassName 通过值判断是否添加加class,
// header-cell-style 头部样式
// row-style 行的样式
// cell-style 每个item 的样式 
<el-table style="margin-bottom: 20px" :data="pmPopList" :row-class-name="tableRowClassName"
                        @row-click='towenti'
                        :header-cell-style="{
                    'background-color': '#04112d',
                    'height': '50px',
                    'padding': '0',
                    'text-align': 'center',
                    'border-bottom': '1px solid #454c69',
                    'font-size':'20px',
                    'color':'#d4e4fb'
                }" :row-style="{
                    'background-color': '#04112d',
                    'font-size':'20px',
                    'color':' #97c0fc',
                    'cursor':'pointer'
                }" :cell-style="{
                    'height': '60px',
                    'font-size':'20px',
                    'text-align': 'center',
                    'line-height': '60px',
                    'padding': '0',
                    'border-bottom': '0px',
                    'border-bottom': '1px solid #454c69',

                }" height="660" ref="table">
                <el-table-column width="100" type="index" label="序号"></el-table-column>
                <el-table-column  prop="xzq" label="措施"></el-table-column>
                <el-table-column
                show-overflow-tooltip = 'true'
                width="200"
                 prop="szlb" label="措施描述" ></el-table-column>
              </el-table>

<srcpit>
data() {
    return {
        pmPopList: [{
		xzq: '以控源截污为基础手段',
		szlb: `一是开展污水收集系统排查工作，重点完成市政污水管网、用户
接入管网、工业废水纳管的排查整治，同时加强空白区管网建设，提
高污水收集率'`
					}],
    }
}
tableRowClassName({
	row,
	rowIndex
}) {
// item的长度大于100 时 这row添加warning-row 的样式
	return row.xzq.length > 100  ? 'warning-row' : '';
},
</srcpit>

<style scoped>

/deep/ .el-table,
/deep/ .el-table__expanded-cell,
/deep/ .el-table th,
/deep/ .el-table tr {
  background-color: transparent; // 采用大屏本来的样式，自身设为透明色
}

.mp-pop >>> .el-table tr:hover, // 鼠标hover上去的颜色
.mp-pop >>> .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgba(0, 0, 0, .5);
}

.mp-pop >>> .el-table--border,
.mp-pop >>> .el-table--group,
.mp-pop >>> .el-table--border::after,
.mp-pop >>> .el-table--group::after,
.mp-pop >>> .el-table--border::after,
.mp-pop >>> .el-table--group::after,
.mp-pop >>> .el-table::before {
  border: none;
  background-color: transparent;  // 设置el-table boder的颜色设为透明色
}
/deep/ .el-table .warning-row td {
  color: #ff3300 !important;
}
</style>

2.el-table设置多行显示省略号

<el-table-column align="center" prop="zhenGaiCuoShi" width="300" label="整改措施">
                  <template slot-scope="{row}">
                    <el-tooltip effect="dark" :content="row.zhenGaiCuoShi" placement="top" popper-class="custom_tooltip">
                      <div
                        style="width:100%;padding: 0px;display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;white-space: normal">
                        {{row.zhenGaiCuoShi}}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>


//style 自定义提示窗样式

 .custom_tooltip {
      color: red;
      width: 1000px !important;
      height: 400px !important;
    }

效果图：

原生js的方式设置多行显示省略号

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    /*修改提示框*/
    #mytitle {
      position: absolute;
      color: #fff;
      max-width: 600px;
      font-size: 14px;
      padding: 4px;
      background: rgba(40, 40, 40, 0.8);
      border: solid 1px #e9f7f6;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="mytooltip" title="个性样式">
    格式样式:
  </div>
  <script type="text/javascript">
    $(function () {
      var x = 10;
      var y = 20;
      var newtitle = '';
      $('div.mytooltip').mouseover(function (e) {
        newtitle = this.title;
        this.title = '';
        $('body').append('<div id="mytitle" >' + newtitle + '</div>');
        $('#mytitle').css({
          'left': (e.pageX + x + 'px'),
          'top': (e.pageY + y - 80 + 'px')
        }).show();
      }).mouseout(function () {
        this.title = newtitle;
        $('#mytitle').remove();
      }).mousemove(function (e) {
        $('#mytitle').css({
          'left': (e.pageX + x + 10 + 'px'),
          'top': (e.pageY + y - 60 + 'px')
        }).show();
      })
    });
  </script>
</body>

</html>

3.去除el-table的背景色

效果图：

代码块：

<div class="user_skills" style="width: 100%">
              <el-table
                :data="hitchLIst"
                border
                max-height="775"
                style="width: 100%"
                :header-cell-style="{
                  background:
                    'url(/static/img/web/hitch_header.png) no-repeat',
                  height: '90px',
                  padding: '0',
                  'text-align': 'center',
                  border: 'none',
                  'font-size': '26px',
                  color: '#00c6ff',
                  'font-family': 'Adobe Heiti Std',
                  'font-weight': 'normal',
                }"
                :row-style="{
                  'background-color': 'transparent',
                  background:
                    'url(/static/img/web/hitch.png) no-repeat',
                  'font-size': '30px',
                  color: ' #fffefe',
                  cursor: 'pointer',
                  // margin: '19px 0',
                }"
                :cell-style="{
                  height: '90px',
                  'text-align': 'center',
                  'line-height': '60px',
                  padding: '0',
                  border: 'none',
                  'font-family': 'MicrosoftYaHei',
                  'font-weight': 400,
                  color: '#ffffff',
                  'line-height': 'auto',
                  'font-size': '30px',
                }"
                ref="table"
              >
                <el-table-column
                  label="序号"
                  align="center"
                >
                  <template slot-scope="scop">
                    <div
                      :class="[
                        scop.$index + 1 < 4
                          ? activeCls
                          : errorCls,
                        'index',
                      ]"
                    >
                      {{ scop.$index + 1 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地点"
                >
                </el-table-column>
                <el-table-column prop="time" label="时间">
                </el-table-column>
                <el-table-column
                  prop="person"
                  label="负责人"
                >
                </el-table-column>
                <el-table-column
                  prop="des"
                  width="400px"
                  label="请情"
                >
                </el-table-column>
              </el-table>
            </div>



<style scoped>
.user_skills {
  width: 96% !important;
  margin: auto;
}
.user_skills /deep/ .el-table--fit {
  padding: 20px 20px 20px 20px;
}
.user_skills /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  border: transparent;
}

.user_skills /deep/ .el-table tr {
  background-color: transparent !important;
}
.user_skills
  /deep/
  .el-table--enable-row-transition
  .el-table__body
  td,
.el-table .cell {
  background-color: transparent;
}
.user_skills /deep/ .el-table .cell {
  line-height: 60px !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.user_skills /deep/ .el-table--border::after { // 去除右侧得1px 得线条 
  background-color: transparent !important;
}
::v-deep.el-table tbody tr:hover > td { // 修改hover上去得颜色
  background-color: rgba(129, 151, 161, 0.4) !important;
  color: #ffffff;
}
</style>