iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
項目前臺頁面用的iview-UI,下面對表格相關的樣式修改和數據渲染進行一下總結
數據渲染相關
正常渲染
直接從教程中拿出來的組件代碼:
columns中填寫的數據必須是一個數組,代表的是表頭相關,常用的值有:
title——表頭一列的名稱
key——表頭一列與表格內數據渲染對應的鍵值
align——文字對齊方式
slot——使用自定義模板渲染表格內容時綁定的鍵值
注：在使用slot渲染時，不需要填寫key
更多關于slot的使用，請查看官網教程,ctrl+F快捷搜索"solt"相關
數據實例：
等待處理...
處理完成
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;
}
總結
以上是生活随笔為你收集整理的iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【网络流24题】火星探险问题
- 下一篇： $.post请求的参数在后台代码中得到为