如何在vue中使用umy-ui

PHP中文网 • 2025年3月13日 05:36:17 • 编程技术 • 阅读 2

本篇文章给大家详细介绍一下在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-ui的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3020333.html