1.下载umy-ui http://www.umyui.com/
npm install umy-ui || yarn add umy-ui
2.创建存放umy-ui的文件 umy-ui.js
-
//完整引入
-
import Vue
from
'vue';
-
import UmyUi
from
'umy-ui'
-
import
'umy-ui/lib/theme-chalk/index.css';
// 引入样式
-
-
Vue.use(UmyUi);
-
最好使用按需引入，借助 babel-plugin-component，以达到减小项目体积的目的。
npm install babel-plugin-component
3.在babel.config.js中进行设置
-
module.exports = {
-
presets: [
-
'@vue/app'
-
],
-
plugins: [
-
[
"component", {
-
'libraryName':
"umy-ui",
-
"styleLibraryName":
"theme-chalk"
-
},
"umy-ui"]
-
]
-
}
按需引入
-
import Vue
from
'vue';
-
import {
-
UTableColumn,
-
UTable,
-
UxGrid,
-
UxTableColumn
-
}
from
'umy-ui';
-
-
Vue.use(UTableColumn);
-
Vue.use(UTable);
-
Vue.use(UxGrid);
-
Vue.use(UxTableColumn);
在main.js中导入一下文件即可，当然以上代码也可以直接写道main.js中，但是代码就没有那么优雅了
4.最大的好处是使用虚拟表格，当数据非常之庞大的时候，用虚拟表格不会显得卡顿
HTML代码
-
<template>
-
<div class="about-layout">
-
<!--
-
ref : 可以用来绑定数据,做虚拟表格
-
height: 绑定高度，若不绑定，自适应高度
-
show-header-overflow 标题过长，是否显示省略号
-
show-overflow 内容过长时显示为省略号
-
border 显示纵向边框
-
-->
-
<ux-grid
-
ref=
"plxTable"
-
:height=
"$store.state.plxTableHeightOne"
-
:show-header-overflow=
"true"
-
:show-overflow=
"true"
-
border
-
>
-
<!--
-
tableHead: 表格标题的数据列表
-
resizable: 列是否允许拖动列宽调整大小
-
title: 设置表格的标题
-
field: 设置表格的显示内容
-
sortable: 是否允许列排序
-
-->
-
<!--
-
使用插槽，可以对数据进行过滤
-
相当于覆盖了field的值
-
-->
-
<ux-table-column
-
v-for=
"(item, index) in tableHead"
-
min-width=
"120"
-
:resizable=
"true"
-
:key=
"index"
-
:title=
"item.label"
-
:field=
"item.prop"
-
:sortable=
"item.sortable"
-
>
-
<template slot-scope="scope">
-
{{
-
tableFiilter(
-
scope.column.property,
-
scope.row[scope.column.property]
-
)
-
}}
-
</template>
-
</ux-table-column>
-
</ux-grid>
-
</div>
-
</template>
JS代码
-
export
default {
-
data() {
-
return {
-
// 标题列表数据
-
tableHead: [
-
{
-
label:
"吃",
-
prop:
"eat",
//需要对应数据中的字段名，否则无效
-
},
-
{
-
label:
"喝",
-
prop:
"drink",
//需要对应数据中的字段名，否则无效
-
},
-
{
-
label:
"玩",
-
prop:
"play",
//需要对应数据中的字段名，否则无效
-
},
-
],
-
// 过滤吃的数据
-
eatObj: {
-
D:
"饭",
-
Y:
"包子",
-
R:
"馒头",
-
S:
"辣条",
-
},
-
tabData:[]
-
};
-
},
-
props: {},
-
methods: {
-
//过滤表格 value === D Y R S 过滤一下
-
//prop 字段名 value 字段值
-
tableFiilter(prop, value) {
-
if (prop ===
"eat") {
-
return
this.eatObj[value];
-
}
-
},
-
// 获取数据
-
getTableData(){
-
let params = {
-
page:
1,
-
pageSize:
10
-
}
-
getTableData(params).then(
res => {
-
if(res.code !==
200){
-
return
this.$Message(
'请求发生错误')
-
}
-
this.tabData = res.data
-
// 调用虚拟表格reloadData方法 实现虚拟表格
-
this.$refs.plxTable.reloadData(
this.tabData);
-
})
-
}
-
},
-
created() {
-
this.getTableData()
-
},
-
};
转载：https://blog.csdn.net/a15297701931/article/details/115912275
查看评论