vue中表格设置某列样式、不显示表头问题
作者：泥巴~
这篇文章主要介绍了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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。