iview table表格的自定義樣式

iview table表格的自定義樣式

1.需求

• 背景顏色為深色背景
• 左側可勾選checkbox
• 選中滑鼠hover浮動到某行，當前行背景顏色更換為紅色
• 斑馬條紋

效果圖

2.設計

• iview的官方文檔已經給出了解決方案

• 選中高亮=》highlight-row
• 斑馬條紋=》stripe
• 表格自帶浮動到某行變色
• checkbox=》selection

<Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暫無數據"
:row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>

3.實踐

• 首先將背景顏色換掉，發現根本換不掉啊有木有，看官方給的例子中，是在類選擇器後面 跟上一個td這樣換的 類似

/*底色*/
.ivu-table td{
background-color: #182328;
color: #fff;
}

• 背景換完，頭部的th沒有換掉 那就再來一個

/*頭部th*/
.ivu-table-header th{
color:#FFD3B4;
font-weight: bold;
background-color: #212c31;
border: none;
}

• 背景ok了，接下來斑馬顏色，這個我是直接用樣式真的改不掉。看到官方的例子中有類似的方案

那就簡單了，上面Table標籤的:row-class-name="rowClassName"就是在這個地方用，定義樣式

/*偶數行*/
.ivu-table-stripe-even td{
background-color: #434343!important;
}
/*奇數行*/
.ivu-table-stripe-odd td{
background-color: #282828!important;
}

接下來定義rowClassName方法

rowClassName :function (row, index) {
if(index%2==0){
return "ivu-table-stripe-even";
}
else return "ivu-table-stripe-odd";
}

一頓操作之後：

• 發現我靠好像把把滑鼠浮動到某行的樣式給覆蓋沒了，反正要換色，自己就改一下吧

/*浮在某行*/
.ivu-table-row-hover td {
background-color: #d63333!important;
}

• nice已經可以了，接下來選中某行更換當前行背景，因為之前在Table標籤內highlight-row就是選中高亮，不起作用的原因是被覆蓋掉了，那就在寫一個樣式

/*選中某一行高亮*/
.ivu-table-row-highlight td {
background-color: #d63333!important;
}

• 如果出現樣式不起作用，很可能就是被自己寫的樣式互相覆蓋了，建議將樣式的類選擇器換個上下位置應該就解決了，多嘗試幾下
• ok了，需求提到的功能基本都已實現，左側默認選擇框的出參我要確認一下，寫一個方法 @on-selection-change="onSelect" @on-selection-change標籤有兩個參數，selection已選項，index當前索引

onSelect(selection,index){
// console.log(this.$refs.selection.data)
this.selecteds = selection;
console.log(this.selecteds)
}

• 額外的功能，checkbox默認選中，可以在表格數據對應的data1中某條數據添加_checked: true

{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03",
_checked: true
}

• 最終代碼

<style>
/*外層table的border*/
.ivu-table-wrapper {
border:none
}
/*底色*/
.ivu-table td{
background-color: #182328;
color: #fff;
}
/*每行的基本樣式*/
.ivu-table-row td {
color: #fff;
border:none
}
/*頭部th*/
.ivu-table-header th{
color:#FFD3B4;
font-weight: bold;
background-color: #212c31;
border: none;
}
/*偶數行*/
.ivu-table-stripe-even td{
background-color: #434343!important;
}
/*奇數行*/
.ivu-table-stripe-odd td{
background-color: #282828!important;
}
/*選中某一行高亮*/
.ivu-table-row-highlight td {
background-color: #d63333!important;
}
/*浮在某行*/
.ivu-table-row-hover td {
background-color: #d63333!important;
}
</style>
<template>
<div>
<Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暫無數據" :row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div>
</template>
<script>
export default {
data () {
return {
selecteds: [],
columns4: [
{
type: "selection",
width: 60,
align: "center"
},
{
title: "蘋果",
key: "apple"
},
{
title: "香蕉",
key: "banana"
},
{
title: "橘子",
key: "orange"
},
{
title: "西瓜",
key: "watermelon"
},
{
title: "牛奶",
key: "milk"
},
{
title: "麵包",
key: "Bread"
},
{
title: "鹽",
key: "salt"
},
{
title: "小麥",
key: "wheat"
},
{
title: "大米",
key: "rice"
},
{
title: "醬油",
key: "soy"
},
{
title: "其他",
key: "else"
}
],
data1: [
{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03"
},{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03"
},{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03"
},{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03",
_checked: true
},{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03"
},{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03"
},{
apple: "John Brown",
banana: "18",
orange: 18,
watermelon: "New York No. 1 Lake Park",
milk: "2016-10-03",
Bread: "New York No. 1 Lake Park",
salt: "2016-10-03",
wheat: "New York No. 1 Lake Park",
rice: "2016-10-03",
soy: "New York No. 1 Lake Park",
else: "2016-10-03"
}
]
}
},
methods: {
handleSelectAll (status) {
// this.$refs.selection.selectAll(status);
// console.log(this.$refs.selection.$children)
this.$refs.selection.selectAll(status);
console.log(this.selection)
},
rowClassName :function (row, index) {
if(index%2==0){
return "ivu-table-stripe-even";
}
else return "ivu-table-stripe-odd";
},
onSelect(selection,index){
// console.log(this.$refs.selection.data)
this.selecteds = selection;
console.log(this.selecteds)
}
/*,
onDoubleClick(row,index){
console.log(row)
//改變為勾選樣式
//將當前行加入到selection
this.$refs.selection.data[index]._checked=!this.$refs.selection.data[index]._checked
}*/
}
}
</script>

4.總結

• iview的文檔其實我感覺並不是特別全面，還是要自己動手的呢
• 改變表格樣式的話，

  類選擇器後面需要加td

• 真不會寫前端，真tm難改

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！