vue中使用iview-UI表格樣式修改和使用自定義模板數據渲染相關

目錄

• 數據渲染相關
  • 正常渲染
  • 對數據進行選擇性渲染
• 樣式相關
  • 表頭樣式修改
  • 表格內部顏色修改
  • 去掉表格整體邊框
  • 設置鼠標懸停顏色
  • 設置當前行選中顏色

項目前台頁面用的iview-UI,下面對表格相關的樣式修改和數據渲染進行一下總結

數據渲染相關

正常渲染

直接從教程中拿出來的組件代碼:

<Table :columns="columns" :data="data"></Table>

columns中填寫的數據必須是一個數組,代表的是表頭相關,常用的值有:

title——表頭一列的名稱
key——表頭一列與表格內數據渲染對應的鍵值
align——文字對齊方式
slot——使用自定義模板渲染表格內容時綁定的鍵值

注：在使用slot渲染時，不需要填寫key

更多關於slot的使用，請查看官網教程,ctrl+F快捷搜索"solt"相關

數據實例：

<Table :columns="columns" :data="data">
    <template slot-scope="{ row }" slot="statu">
        <p v-if="row.statu === 0">等待處理...</p>
        <p v-if="row.statu === 1">處理完成</p>
    </template>
</Table>

columns: [
                    {
                        title: '名稱',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '測點',
                        key: 'position',
                        align: 'center',
                    },
                    {
                        title: '時間',
                        key: 'time',
                        align: 'center',
                    },
                    {
                        title: '級別',
                        slot: 'rank',
                        align: 'center',
                    },
                    {
                        title: '狀態',
                        slot: 'statu',
                        align: 'center',
                    },
                ],

data: [
                    {
                        name: '測試',
                        position: '18孔xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        time: '2019/10/25 16:51:54',
                        rank: 1,
                        statu: 0
                    },
                    {
                        name: '測試',
                        position: '18孔xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        time: '2019/10/25 16:51:54',
                        rank: 2,
                        statu: 1
                    },

對數據進行選擇性渲染

項目有一項功能是要只渲染data中所有statu為0的項，目前我還未找到能在表格上直接進行操作的方法（即隱藏某些行）

我所用的方法是對data中的數據進行處理，剔除statu為1的項，新建一個數組，然后將statu為0的項push進去，渲染表格時使用新數組進行渲染。

如果有什么簡便的直接可以對表格進行操作的方法，歡迎評論留言。

樣式相關

直接從教程中拿出來的組件樣子:

因為我是深色背景，所以需要將表格調成深色相關樣式,不多說上干貨

注：如果是在vue組件中使用需要把style中的scoped去掉，或者重新寫個style標簽

表頭樣式修改

    .ivu-table-header th {
        color: #fff;    //字體顏色
        font-weight: bold;       //字體粗細
        background-color: #041A23;    //背景顏色
        border: none;    //邊框有無
        border-bottom: 2px solid #062735;     //邊框粗細及樣式顏色
    }

表格內部顏色修改

    .ivu-table td {
        background-color: #041A23;    //背景色
        color: #fff;    //字體色
        border: none;       //是否有邊框
    }

去掉表格整體邊框

.ivu-table-wrapper {
        border: none;
    }

在實際操作時,上面的代碼無法達到我想要的效果,只去掉了左上的邊框（但是實際上全部的邊框都已經去除）：

查看了Element之后,發現右下的邊框對應的是before和after的偽類選擇器,還需要將這兩個偽類選擇器的樣式去除

簡單粗暴解決方法:將偽類選擇器的樣式背景色置成與我的背景色相同就可以了

    .ivu-table:before {
        background-color: #041A23
    }
    .ivu-table:after {
        background-color: #041A23
    }

設置鼠標懸停顏色

    .ivu-table-row-hover td {
        background-color: #283D45 !important;
    }

設置當前行選中顏色

.ivu-table-row-highlight td{
        background-color: #283D45 !important;
    }