怎么在vue中使用umy-ui

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

创新互联是一家专注于网站设计制作、成都网站制作与策划设计,荣昌网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:荣昌等地区。荣昌做网站价格咨询:18982081108

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代码

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