el-table 改变某一行的序号、改变某一行样式、改变某一个单元格样式、改变hover样式、改变点击样式_el-table 行样式

---

前言

最近在尝试做一个仿网易云的vue项目，记录下关于 element-ui 中 el-table 组件的一些功能或样式

---

一、改变行的hover样式

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f0f1f2 !important;
}
// <style> 不要加 scoped
1
2
3
4

二、改变点击样式

先在<el-table></e-table> 标签加上 highlight-current-row

<el-table highlight-current-row ></el-table>
1

然后设置样式

.el-table__body tr.current-row > td {
  background-color: #e5e5e5 !important;
}
// <style> 不要加 scoped
1
2
3
4

三、改变某一行的样式

利用 el-table 的 attribute：
row-style： 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
类型： Function({row, rowIndex})/Object

函数返回一个 对象

方式一

所有行样式都会相同
<el-table :row-style="{ height: '0' }">
1
2

方式二

<el-table :row-style="fun">
1

methods:{
	fun({row, rowIndex}){
		if (根据row中的数据，或rowIndex判断要修改的行){
			return {
				color: 'red'
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

---

四、改变某一个单元格的样式

使用方法同上，不同的是 函数有四个参数 row, column, rowIndex, columnIndex
挑选参数来判断要修改的单元格

// 播放音乐时，歌曲名变红
    toRed({ row, columnIndex }) {
      let style = { padding: "4px" };
      if (row.id === this.toRedRowId && columnIndex === 2) {
        style.color = "#ec4141";
      }
      return style;
    },
1
2
3
4
5
6
7
8

五、改变某一行序号

<el-table ... >
      <!-- type="index" :index="indexMethod" -->
      <el-table-column width="60">
        <template slot-scope="{ row, $index }">
        用 v-if 或 v-show 判断要显示的内容
          <i
            v-if="row.id === toRedRowId"    <!-- 当当前行的数据id等于双击的行数据id时 -->
            class="iconfont icon-yinliang"
            style="color: #ec4141; font-size: 13px; font-weight: 700"
          >
          </i>
          <!-- 自己写的函数 indexMethod 格式化序号的函数  -->
          <span v-else>{{ indexMethod($index) }}</span>
          <!--  改成
           		<span v-else>{{ $index }}</span> 
           		则是从0开始编号
           -->
        </template>
      </el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20