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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
v-model可以实现数据的双向绑定,也是vue的最突出的优势,其实 v-model 实际上是一个语法糖,本文将给大家介绍一下vue中v-model的实现原理,文中有相关的代码供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于Vue缓存方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了Vue自定义元素身上的右键事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
这篇文章主要介绍了vue+vuex+axio从后台获取数据存入vuex，组件之间共享数据,非常具有实用价值，需要的朋友可以参考下2017-04-04
这篇文章主要介绍了Vue render深入开发讲解2018-04-04
这篇文章主要介绍了Vue如何跨组件传递Slot的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue路由传参刷新后数据丢失问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
下面小编就为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Vue 项目中如何使用fullcalendar 时间段选择插件(类似课程表格)
最近完成一个项目,需要选择一个会议室,但是最好能够通过在图上显示出该 会议室在某某时间段内已经被预定了,初看这个功能感觉很棘手,仔细分析下实现起来还是挺容易的,下面通过示例代码讲解Vue项目中使用fullcalendar时间段选择插件,感兴趣的朋友一起看看吧2024-07-07
最新评论