这篇文章给大家分享的是有关怎么在vue中使用umy-ui的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
1.下载umy-ui http://www.umyui.com/
计算
安全
数据库
网络和加速
企业服务
npm install umy-ui || yarn add umy-ui2.创建存放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>
<p 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>
</p>
</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()
},
};感谢各位的阅读！关于“怎么在vue中使用umy-ui”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
