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

1.调整列的样式

1.1给列(单元格)添加 class

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

cell-class-name

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

returnName 是一个函数

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

</el-table>

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

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

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

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

returnName 函数介绍 意思就是…

1.returnName这个函数 会绑定给每一个单元格
2.也就是 有几个单元格 就会执行几次,会给每个单元格 输出class
3.return 的值 就是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>

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

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

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

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

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

 :cell-style="returnStyle" 

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

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

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

</el-table>

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

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

  methods: {
    returnStyle(obj) {
    //columnIndex  就是第几列的意思
    //当时 第一列的时候  返回{} {}就是style的值
    //否则 不添加style样式
      if (obj.columnIndex == 1) {
        return {
				color:'red'
			}
      }
    }
}

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

returnStyle函数介绍 意思就是…

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

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

2.调整行的样式

1.1给行添加 class

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

row-class-name

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

returnName 是一个函数

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

</el-table>

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

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

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

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

returnName 函数介绍 意思就是…

1.returnName这个函数 会绑定给每行
2.也就是 有几行 就会执行几次,会给每行 输出class
3.return 的值 就是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给行返回style样式

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

 :row-style="returnStyle" 

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

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

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

</el-table>

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

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

  methods: {
    // return 表格单元格style
    //obj  是参数  官网提供的表格数据 
    //可以打印查看
    returnStyle(obj) {
    //rowIndex  就是第几行的意思
    //此时 第一行的时候  返回{} {}就是style的值
    //否则 不添加style样式
      if (obj.rowIndex  == 1) {
        return {
				color:'red'
			}
      }
    }
}

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

returnStyle函数介绍 意思就是…

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

returnName(obj) {
      console.log(obj);
      if (obj.rowIndex == 1) {
        return "tableTextColor"
      }
    },

```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);
  }
}

<el-table v-loading="loading" :row-style="returnStyle" :data="fabList" @selection-change="handleSelectionChange">

returnStyle(obj) {
  if (obj.rowIndex == 1) {
    console.log(1);
    return {
      color:"red"
    }
  }
},