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难改