对Element-ui中table row-class-name/row-style/cell-class-name/cell-style设置每列/每行/单个的样式

时间：2024-10-01 15:01:47

文章目录

  • 1.调整列的样式
    • 1.1给列(单元格)添加 class
      • 第一步 table 标签中引入:cell-class-name="returnName"
      • 第二步 method 添加 对应的方法"returnName"
        • returnName 函数介绍 意思就是..
      • 第三步 style标签内 添加 对应的样式
      • 第四 某列添加class的 简便的方法class-name
    • 1.2给列(单元格)返回style样式
      • 第一步 table 标签中引入:cell-style="returnStyle"
      • 第二步 method 添加 对应的方法"returnStyle"
        • returnStyle函数介绍 意思就是..
  • 2.调整行的样式
    • 1.1给行添加 class
      • 第一步 table 标签中引入:row-class-name="returnName"
      • 第二步 method 添加 对应的方法"returnName"
        • returnName 函数介绍 意思就是..
      • 第三步 style标签内 添加 对应的样式
    • 1.2给行返回style样式
      • 第一步 table 标签中引入:row-style="returnStyle"
      • 第二步 method 添加 对应的方法"returnStyle"
        • returnStyle函数介绍 意思就是..

1.调整列的样式

1.1给列(单元格)添加 class

使用 element-ui 官方提供的 cell-class-name

cell-class-name
  • 1

第一步 table 标签中引入:cell-class-name=“returnName”

returnName 是一个函数

<el-table v-loading="loading" 
:cell-class-name="returnName" 
:data="fabList">

</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5

第二步 method 添加 对应的方法"returnName"

return 的值 就是返回class名字
obj 是参数 官网提供的表格数据
可以打印查看

  methods: {
    // return 表格单元格class
    //obj  是参数  官网提供的表格数据 
    //可以打印查看
    returnName(obj) {
    //columnIndex  就是第几列的意思
    //当时 第一列的时候  返回tableTextColor 当的class
    //否则 不处理不添加class
      if (obj.columnIndex == 1) {
        return "tableTextColor"
      }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

上面函数可能不太理解对吧:

returnName 函数介绍 意思就是…

这个函数 会绑定给每一个单元格
2.也就是 有几个单元格 就会执行几次,会给每个单元格 输出class
的值 就是class名字 将return 的值当做class 添加到 td 上面
3.当 return为空 或没有时候 就不添加class

只要限制的条件改变 就能实现不同单元格的样式修改

第三步 style标签内 添加 对应的样式


<style lang="scss" scoped>
//某行的class样式
/deep/.tableTextColor {
  color: rgb(14, 120, 241);
  cursor: pointer;
  transition: 0.5s linear;
  //hover 效果  可以不要
  &:hover .cell{
    transition: 0.2s linear;
    transform:scale(1.2) translateX(24px);
    color: rgb(252, 128, 13);
  }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

第四 某列添加class的 简便的方法class-name

  <el-table-column class-name="tableTextColor" />
  • 1

之后 在style 中写入对应的样式就好了

1.2给列(单元格)返回style样式

使用 element-ui 官方提供的 cell-style

 :cell-style="returnStyle"
  • 1

第一步 table 标签中引入:cell-style=“returnStyle”

table 标签中引入:cell-style=“returnStyle”
returnName 是一个函数

<el-table v-loading="loading" 
:cell-style="returnStyle" 
:data="fabList">

</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5

第二步 method 添加 对应的方法"returnStyle"

return 的值 就是返回style内容
obj 是参数 官网提供的表格数据
可以打印查看

  methods: {
    returnStyle(obj) {
    //columnIndex  就是第几列的意思
    //当时 第一列的时候  返回{} {}就是style的值
    //否则 不添加style样式
      if (obj.columnIndex == 1) {
        return {
				color:'red'
			}
      }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

上面函数可能不太理解对吧:

returnStyle函数介绍 意思就是…

这个函数 会绑定给每一个单元格
2.也就是 有几个单元格 就会执行几次,会给每个单元格 输出style 对象{}
的值 就是style里面的样式 将return 的值当做style样式添加到 td 上面
4.当 return为空 或没有时候 就不添加style

只要限制的条件改变 就能实现不同单元格的样式修改

2.调整行的样式

1.1给行添加 class

使用 element-ui 官方提供的 row-class-name

row-class-name
  • 1

第一步 table 标签中引入:row-class-name=“returnName”

returnName 是一个函数

<el-table v-loading="loading" 
:row-class-name="returnName" 
:data="fabList">

</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5

第二步 method 添加 对应的方法"returnName"

return 的值 就是返回class名字
obj 是参数 官网提供的表格数据
可以打印查看

  methods: {
    // return 表格单元格class
    //obj  是参数  官网提供的表格数据 
    //可以打印查看
    returnName(obj) {
    //rowIndex  就是第几行的意思
    //当时 第一列的时候  返回tableTextColor 当的class
    //否则 不处理不添加class
      if (obj.rowIndex  == 1) {
        return "tableTextColor"
      }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

上面函数可能不太理解对吧:

returnName 函数介绍 意思就是…

这个函数 会绑定给每行
2.也就是 有几行 就会执行几次,会给每行 输出class
的值 就是class名字 将return 的值当做class 添加到 tr 上面
3.当 return为空 或没有时候 就不添加class

第三步 style标签内 添加 对应的样式


<style lang="scss" scoped>
//某行的class样式
/deep/.tableTextColor {
  color: rgb(14, 120, 241);
  cursor: pointer;
  transition: 0.5s linear;
  //hover 效果  可以不要
  &:hover .cell{
    transition: 0.2s linear;
    transform:scale(1.2) translateX(24px);
    color: rgb(252, 128, 13);
  }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

1.2给行返回style样式

使用 element-ui 官方提供的 row-style

 :row-style="returnStyle"
  • 1

第一步 table 标签中引入:row-style=“returnStyle”

table 标签中引入:row-style=“returnStyle”
returnStyle是一个函数

<el-table v-loading="loading" 
:row-style="returnStyle" 
:data="fabList">

</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5

第二步 method 添加 对应的方法"returnStyle"

return 的值 就是返回style名字
obj 是参数 官网提供的表格数据
可以打印查看

  methods: {
    // return 表格单元格style
    //obj  是参数  官网提供的表格数据 
    //可以打印查看
    returnStyle(obj) {
    //rowIndex  就是第几行的意思
    //此时 第一行的时候  返回{} {}就是style的值
    //否则 不添加style样式
      if (obj.rowIndex  == 1) {
        return {
				color:'red'
			}
      }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

上面函数可能不太理解对吧:

returnStyle函数介绍 意思就是…

这个函数 会绑定给每行
2.也就是 有几行 就会执行几次,会给行 输出style 对象{}
的值 就是style里面的样式 将return 的值当做style样式添加到 tr 上面
3.当 return为空 或没有时候 就不添加style
只要限制的条件改变 就能实现不同单元格的样式修改

returnName(obj) {
      console.log(obj);
      if (obj.rowIndex == 1) {
        return "tableTextColor"
      }
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

```javascript
/deep/.tableTextColor {
  color: rgb(14, 120, 241);
  cursor: pointer;
  transition: 0.5s linear;
  &:hover .cell {
    transition: 0.2s linear;
    transform: scale(1.2) translateX(24px);
    color: rgb(252, 128, 13);
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<el-table v-loading="loading" :row-style="returnStyle" :data="fabList" @selection-change="handleSelectionChange">
  • 1
returnStyle(obj) {
  if (obj.rowIndex == 1) {
    console.log(1);
    return {
      color:"red"
    }
  }
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

相关文章