element_ui table修改表格样式

最新推荐文章于 2024-09-05 08:55:06 发布

冷太阳a

最新推荐文章于 2024-09-05 08:55:06 发布

阅读量1.3k

点赞数

分类专栏： Vue 项目总结 HTML 、CSS

本文链接：https://blog.csdn.net/A_9888/article/details/111151408

版权

项目总结同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

Vue

45 篇文章 2 订阅

订阅专栏

HTML 、CSS

34 篇文章 0 订阅

订阅专栏

修改表格点击选中时效果

 /deep/.el-table__body tr.current-row > td {
  background: #406bf8 !important;
  color: #fff;
  cursor: pointer;
}

2.修改过渡时效果

/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
   background: #406bf8 !important;
  color: #fff;
  cursor: pointer;
}

3.表格里面行嵌套表格或者嵌套其他内容
在这里插入图片描述

  <el-dialog
        title="打分历史记录"
        :visible.sync="dialogHistory"
        width="800px"
        @close="closeDialogHistory"
      >
        <div class="text item">
          <div class="table">
            <!-- 表格 -->
            <el-table
              :data="historyList"
              style="width: 100%"
              center
              height="400px"
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              :stripe="true"
              :row-key="getRowKeys"
              :expand-row-keys="expands"
              @expand-change="expandSelect"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table
                    :data="props.row.points"
                    border
                    style="width: 100%"
                    :header-cell-style="{
                      background: '#eef1f6',
                      color: '#606266',
                    }"
                    stripe
                  >
                    <el-table-column prop="title" label="评价指标名称">
                    </el-table-column>
                    <el-table-column prop="score" label="得 分" width="90px">
                      <template slot-scope="scope">
                        {{ scope.row.score / 100 }}
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="作者" prop="userName"> </el-table-column>
              <el-table-column label="学校" prop="schoolName">
              </el-table-column>
              <el-table-column label="得分" prop="score">
                <template slot-scope="scope">
                  {{ scope.row.score / 100 }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>


//关闭历史记录时重置展开行
    closeDialogHistory() {
      this.dialogHistory = false
      this.expands = []
    },
    //历史记录二级表格下拉手风琴事件
    getRowKeys(row) {
      // console.log(row)
      return row.userName//绑定数据源中的唯一值，一般绑定ID
    },
    // 折叠面板每次只能展开一行
    expandSelect(row, expandedRows) {
      var that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.userName) // 每次push进去的是每行的ID
        }
      } else {
        that.expands = [] // 默认不展开
      }
      // console.log('that.expands', that.expands)
    },