iview table表格的自定义样式(动态改变背景色等)

13 篇文章 0 订阅

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"就是在这个地方用,定义样式

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

接下来定义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难改

转自:https://blog.csdn.net/Zhengzhanjie/article/details/83105084 http://www.pianshen.com/article/397535079/

  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值