如何在vue中使用umy-ui-Vue.js

本篇文章给大家详细介绍一下在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的知识。速戳>>知识兔学习精品课！