vue中表格設(shè)置某列樣式、不顯示表頭問題
更新時間：2023年10月19日 15:28:20 作者：泥巴~
這篇文章主要介紹了vue中表格設(shè)置某列樣式、不顯示表頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue中表格設(shè)置某列樣式、不顯示表頭
第一列為標題，第二列為內(nèi)容
1.表格數(shù)據(jù)
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"http://隱藏表頭
fit
**:cell-class-name="blue"**//操作列
>
<el-table-column
prop="name"
label="名稱"
width="180"
color="#f00"
>
</el-table-column>
<el-table-column
prop="data"
label="數(shù)據(jù)"
>
</el-table-column>
</el-table>
3.修改第一列表格樣式操作
methods:{
blue({row,column,rowIndex,columnIndex}){
if(columnIndex == 0) {
return 'blue'
}
}
}
4.改為自己想要的藍色
.blue{
color: #409EFF;
}
vue根據(jù)條件給表格高亮某一行
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>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近在學習Vue的時候,正好學到了引入echarts圖表做數(shù)據(jù)統(tǒng)計的內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于Vue使用Echarts圖表多次初始化報錯問題的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
在開發(fā)中我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗,下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過渡動畫的相關(guān)資料,需要的朋友可以參考下2022-02-02
Vue組件庫ElementUI實現(xiàn)表格列表分頁效果
這篇文章主要為大家詳細介紹了Vue組件庫ElementUI實現(xiàn)表格列表分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本文通過實例代碼給介紹了vue使用自定義組件實現(xiàn)通訊錄功能,需要的朋友可以參考下2018-09-09
用element的upload組件實現(xiàn)多圖片上傳和壓縮的示例代碼
這篇文章主要介紹了用element的upload組件實現(xiàn)多圖片上傳和壓縮的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了VueJs與ReactJS和AngularJS的異同點,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue2中使用sass并配置全局的sass樣式變量的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
本文主要介紹了Vue實現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07