1.使用View UI
第一种方法使用CDN引入。在页面引入js和css文件。
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
|
第二种方法使用npm安装。搭配webpack构建工具更方便管理。
$ npm install view-design --save
|
安装后 vue项目中main.js文件会出现如下信息。
这里我引入了整个viewUI组件,当然你也可以按照需求引用。具体就不多讲了 View UI官网详细的介绍了如何按需引用。
2.使用View Table组件
一个基本的Table组件
<template>
<Card>
<h4>表格例子</h4>
<Table :columns="column" :data="List"></Table>
</Card>
</template>
<script>
export default {
data(){
return {
column:[
{title:'编号',key:'id'},{title:'性别',key:'gender'}
],
List:[
{id:1,name:'小明',gender:'男'},
{id:2,name:'小花',gender:'女'}
]
}
}
}
</script>
|
<Table></Table>上的colunms属性表示表格的列 data属性表示表格需要渲染的数据。
很明显如上的基本Table组件是较为繁琐的，每次都需要频繁的指定列明和属性，在实际开发中我们是怎么使用的呢？
<template>
<Table height="185" class="small-table_DT" :columns="columns" :data="data"
:no-data-text="no_data_text"></Table>
</template>
<script>
import {redirectHref} from "@/assets/utils";
export default {
name: "DianzanTable",
props: {
data: {
type: Array,
default() {
return []
}
},
host: {
type: String,
default() {
return ''
}
}
},
data() {
return {
no_data_text: '榜单暂无数据，赶快加油吧！',
columns: [
{
title: '名次',
align: 'center',
width:50,
render(h, params) {
switch (params.index) {
case 0:
return h('img', {
attrs: {
src: '/phx/kfcl/m3/prod/first.png',
},
style: {
width: '5vw'
}
})
case 1:
return h('img', {
attrs: {
src: '/phx/kfcl/m3/prod/second.png',
},
style: {
width: '5vw'
}
})
case 2:
return h('img', {
attrs: {
src: '/phx/kfcl/m3/prod/third.png',
},
style: {
width: '5vw'
}
})
default:
return h('div', {}, params.index + 1
)
}
}
},
{
title: '人员信息',
align: 'center',
width:90,
render(h, params) {
return h('span', {}, `${params.row.uploaderName}(${params.row.city})`)
}
},
{
title: '视频名称',
align: 'center',
render(h, params) {
return h('div',
[
h('button', {
style: {
background: 'none',
border: 'none',
textDecoration: 'none',
color: 'none'
}, on: {
click: () => {
top.location.href = redirectHref() + "/video_detail/ph_detail.html?videoBm=" + params.row.videoBm
}
}
}, `${params.row.videoName}`)
]
,)
},
},
{
title: '点赞数',
align: 'center',
width:47,
render(h, params) {
return h('div', {}, params.row.videoLike)
},
filter:[],
filterMethod(value,row){
}
}
]
}
},
}
</script>
|
<Table></Table>标签对中 height表示表格的高度。no-data-text表示在表格无数据时显示的文字。
columns数组中：包含的便是后台接口返回的数据信息了 title：表头名称 align：对齐方式 width：表格每列自定义的宽度。
render(h,Object) 方法
自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前 索引。
return 的h()中 第一个参数为拥有一对标签对的HTML标签对。第二个参数为该标签对的属性，样式或方法。第三个参数表示返回值。
当后台返回的数据并非是你想要展示给页面的数据时。可以使用render函数对接口返回的数据进行处理。上面代码中,基本上都用到了数据处理。
有时候，我们可能希望表头显示也是动态处理的。这时候我们就可以使用renderHeader方法
{
renderHeader(h, params) {
return h('span', {
style:{
}
}, [h('div',{},'累计成交金额(万元)'),h('div',{
attrs: {
id: 'salesAmountSW'
}
})],)
},
align: 'center',
width:100,
render(h, params) {
let success_amount = (params.row.salesAmount / 10000).toFixed(2);
return h('div', {}, success_amount)
},
}
|
具体使用方法如上。对表头以及该列数据分别使用了renderHeader和render方法进行处理。
表格过滤数据
this.columns[3]["filters"]=[{label:'高于2500',value:0},{label:'低于2500',value:1}];
this.columns[3]["filterMethod"]=(e,row)=>{
if (e===0)
return row.videoLike>2500;
else
return row.videoLike<2500;
}
|
表格多选
@on-selection-change,只要选项中发生变化时就会触发，返回值为selection，已选项。
<Table @on-selection-change="getSelect" :columns="colunmns" :data="List"></Table>
|
columns: [
{
type: 'selection',
align: 'center'
},
{
title: 'Name',
key: 'name',
},
{
title: 'Age',
key: 'age',
}
],
|
methods:{
getSelect(selected){
}
}
|
修改官方样式
如上代码,我在<Table></Table>标签对中加上了一个类名称为small-table_DT因此我们可以根据这个类选择器来选择他的后代标签进行处理。
<style>
.small-table_DT {
border: none !important;
width: 74.5vw;
display: flex !important;
height: auto !important;
background-color: rgba(0, 0, 0, 0) !important;
}
.small-table_DT th {
background-color: rgba(0, 0, 0, 0) !important;
}
.small-table_DT .ivu-table-body {
background-color: rgba(0, 0, 0, 0);
}
.small-table_DT .ivu-table {
color: #B4CBE6;
font-size: 13px;
font-weight: bold;
}
.small-table_DT .ivu-table td {
height: 36px !important;
}
.small-table_DT .ivu-table-header table {
width: 100% !important;
}
.small-table_DT .ivu-table-cell {
font-size: 0.1rem;
}
.small-table_DT .ivu-table table {
width: 100% !important;
}
.small-table_DT .ivu-table-tip tr td span {
color: #fff;
}
.small-table_DT th .ivu-table-cell {
font-size: 11px !important;
font-weight: bold !important;
color: #FFE8A0 !important;
text-shadow: 0 5px 4px #444
}
</style>
|
微信
支付宝