vue中表格设置某列样式、不显示表头问题
更新时间：2023年10月19日 15:28:20 作者：泥巴~
这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中表格设置某列样式、不显示表头
第一列为标题，第二列为内容
1.表格数据
tableData: [{
name: '1：',
data: '2',
}, {
name: '1：',
data: '2',
},{
name: '1：',
data: '2',
},{
name: '1：',
data: '2',
}, {
name: '1：',
data: '2',
},{
name: '1：',
data: '2',
}]
2.html代码
<el-table
v-show="activeName == 'second'"
:data="tableData"
border
stripe//斑马线
style="width: 100%"
:show-header="false"//隐藏表头
fit
**:cell-class-name="blue"**//操作列
>
<el-table-column
prop="name"
label="名称"
width="180"
color="#f00"
>
</el-table-column>
<el-table-column
prop="data"
label="数据"
>
</el-table-column>
</el-table>
3.修改第一列表格样式操作
methods:{
blue({row,column,rowIndex,columnIndex}){
if(columnIndex == 0) {
return 'blue'
}
}
}
4.改为自己想要的蓝色
.blue{
color: #409EFF;
}
vue根据条件给表格高亮某一行
1.表格绑定属性:row-class-name="tableRowClassName"
<el-table
:data="dataList"
stripe
border
v-loading="listLoading"
class="detable"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>2.方法
tableRowClassName({ row, rowIndex }) {
if (row.sbillsNo==this.sbillsNoQuery) {
return 'rowBackground';
}
},3.样式
<style >
.el-table .rowBackground td,.el-table--enable-row-hover .el-table__body tr.rowBackground:hover>td{background: #ceebff;}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近在学习Vue的时候,正好学到了引入echarts图表做数据统计的内容,所以下面这篇文章主要给大家介绍了关于Vue使用Echarts图表多次初始化报错问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue组件中prop属性使用说明,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下2022-02-02
这篇文章主要为大家详细介绍了Vue组件库ElementUI实现表格列表分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文通过实例代码给介绍了vue使用自定义组件实现通讯录功能,需要的朋友可以参考下2018-09-09
用element的upload组件实现多图片上传和压缩的示例代码
这篇文章主要介绍了用element的upload组件实现多图片上传和压缩的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了vxe-table中vxe-grid的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了VueJs与ReactJS和AngularJS的异同点,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
本文主要介绍了Vue实现固定底部组件的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最新评论