怎么在vue中使用umy-ui

这篇文章给大家分享的是有关怎么在vue中使用umy-ui的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

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中使用umy-ui”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！