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"
}
}
},
