iview table表格的自定義樣式

時間 2019-11-13

標籤 iview table 表格自定義樣式简体版

原文原文鏈接

iview table表格的自定義樣式

1.需求

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

效果圖javascript

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"就是在這個地方用，定義樣式css

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

接下來定義rowClassName方法html

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>