本篇文章给大家详细介绍一下在vue中使用umy-ui的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
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> <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.js教程
以上就是如何在vue中使用umy-ui的详细内容。