So verwenden Sie umy-ui in Vue

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Verwendung von umy-ui in Vue. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1. Laden Sie umy-ui herunter http://www.umyui.com/

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

2. Erstellen Sie eine Datei zum Speichern von 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);

Am besten bei Bedarf verwenden Import mit Hilfe von babel -plugin-component, um die Projektgröße zu reduzieren.

npm install babel-plugin-component

3. Einrichten in babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ["component", {
      'libraryName': "umy-ui",
      "styleLibraryName": "theme-chalk"
    }, "umy-ui"]
  ]
}

Bei Bedarf einführen

import Vue from 'vue';
import {
  UTableColumn,
  UTable,
  UxGrid,
  UxTableColumn
} from 'umy-ui';

Vue.use(UTableColumn);
Vue.use(UTable);
Vue.use(UxGrid);
Vue.use(UxTableColumn);

Natürlich kann der obige Code auch direkt geschrieben werden main.js, aber der Code ist nicht so elegant

4 Der größte Vorteil besteht darin, virtuelle Tabellen zu verwenden. Wenn die Daten sehr groß sind, erscheint die Verwendung virtueller Tabellen nicht verzögert Code

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

Empfohlenes Lernen:

vue.js Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie umy-ui in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!