怎么在vue中使用umy-ui

這篇文章給大家分享的是有關(guān)怎么在vue中使用umy-ui的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

1.下載umy-ui      http://www.umyui.com/

npm install  umy-ui    ||    yarn add umy-ui

2.創(chuàng)建存放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，以達(dá)到減小項(xiàng)目體積的目的。

npm install babel-plugin-component

3.在babel.config.js中進(jìn)行設(shè)置

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中導(dǎo)入一下文件即可，當(dāng)然以上代碼也可以直接寫(xiě)道m(xù)ain.js中，但是代碼就沒(méi)有那么優(yōu)雅了

4.最大的好處是使用虛擬表格，當(dāng)數(shù)據(jù)非常之龐大的時(shí)候，用虛擬表格不會(huì)顯得卡頓

HTML代碼

<template>
  <p class="about-layout">
    <!-- 
      ref :                     可以用來(lái)綁定數(shù)據(jù),做虛擬表格
      height:                   綁定高度，若不綁定，自適應(yīng)高度
      show-header-overflow      標(biāo)題過(guò)長(zhǎng)，是否顯示省略號(hào)
      show-overflow             內(nèi)容過(guò)長(zhǎng)時(shí)顯示為省略號(hào)    
      border                    顯示縱向邊框 
     -->
    <ux-grid
      ref="plxTable"
      :height="$store.state.plxTableHeightOne"
      :show-header-overflow="true"
      :show-overflow="true"
      border
    >
      <!-- 
        tableHead:              表格標(biāo)題的數(shù)據(jù)列表
        resizable:              列是否允許拖動(dòng)列寬調(diào)整大小
        title:                  設(shè)置表格的標(biāo)題
        field:                  設(shè)置表格的顯示內(nèi)容
        sortable:               是否允許列排序
       -->
      <!-- 
         使用插槽，可以對(duì)數(shù)據(jù)進(jìn)行過(guò)濾
         相當(dāng)于覆蓋了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 {
      // 標(biāo)題列表數(shù)據(jù)
      tableHead: [
        {
          label: "吃",
          prop: "eat", //需要對(duì)應(yīng)數(shù)據(jù)中的字段名，否則無(wú)效
        },
        {
          label: "喝",
          prop: "drink", //需要對(duì)應(yīng)數(shù)據(jù)中的字段名，否則無(wú)效
        },
        {
          label: "玩",
          prop: "play", //需要對(duì)應(yīng)數(shù)據(jù)中的字段名，否則無(wú)效
        },
      ],
      // 過(guò)濾吃的數(shù)據(jù)
      eatObj: {
        D: "飯",
        Y: "包子",
        R: "饅頭",
        S: "辣條",
      },
      tabData:[]
    };
  },
  props: {},
  methods: {
    //過(guò)濾表格    value === D   Y  R  S    過(guò)濾一下
    //prop   字段名             value   字段值
    tableFiilter(prop, value) {
      if (prop === "eat") {
        return this.eatObj[value];
      }
    },
    // 獲取數(shù)據(jù)
    getTableData(){
      let params = {
        page:1,
        pageSize:10
      }
      getTableData(params).then(res => {
        if(res.code !== 200){
          return this.$Message('請(qǐng)求發(fā)生錯(cuò)誤')
        }
        this.tabData = res.data
        // 調(diào)用虛擬表格reloadData方法     實(shí)現(xiàn)虛擬表格
        this.$refs.plxTable.reloadData(this.tabData);
      })
    }
  },
  created() {
    this.getTableData()
  },
};

感謝各位的閱讀！關(guān)于“怎么在vue中使用umy-ui”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！