vue中表格設(shè)置某列樣式、不顯示表頭問題
更新時(shí)間：2023年10月19日 15:28:20 作者：泥巴~
這篇文章主要介紹了vue中表格設(shè)置某列樣式、不顯示表頭問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue中表格設(shè)置某列樣式、不顯示表頭
第一列為標(biāo)題，第二列為內(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.改為自己想要的藍(lán)色
.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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
假設(shè)?App?的用戶可以在短時(shí)間內(nèi)進(jìn)行多個(gè)?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進(jìn)行的請求變得無關(guān)緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請求,需要的朋友可以參考下2023-11-11
紅包也叫壓歲錢，是過農(nóng)歷春節(jié)時(shí)長輩給小孩兒用紅紙包裹的禮金。本文將通過Vue制作一個(gè)紅包雨小游戲，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-01-01
Vue組件之間的參數(shù)傳遞與方法調(diào)用的實(shí)例詳解
這篇文章主要介紹了Vue組件之間的參數(shù)傳遞與方法調(diào)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單(demo)
通過本文給您演示一下如何有效地使用遞歸組件，我將通過建立一個(gè)可擴(kuò)展/收縮的樹形菜單的來一步步進(jìn)行。下面通過本文給大家分享用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單，需要的朋友參考下吧2017-12-12
vue使用富文本編輯器vue-quill-editor的操作指南和注意事項(xiàng)
vue中很多項(xiàng)目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項(xiàng),需要的朋友可以參考下2023-05-05
vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片
這篇文章主要介紹了vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片，具有很好的參考價(jià)值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了Vue.js組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫模式搭建組件庫并發(fā)布到 npm，以下一個(gè)簡單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下2018-10-10
跨域指的是在瀏覽器中,當(dāng)一個(gè)網(wǎng)頁嘗試加載另一個(gè)不同域名(或協(xié)議、端口號)下的資源時(shí)所面臨的限制,這篇文章主要給大家介紹了關(guān)于前端uniapp微信小程序跨域問題的解決方法,需要的朋友可以參考下2024-08-08