在vue中如何使用umy

您所在的位置：网站首页 › umu官方下载怎么使用 › 在vue中如何使用umy

在vue中如何使用umy

2024-06-24 05:24| 来源: 网络整理| 查看: 265

本篇文章给大家详细介绍一下在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代码

{{ tableFiilter( scope.column.property, scope.row[scope.column.property] ) }}

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

在vue中如何使用umy

今日新闻

推荐新闻