How to use umy-ui in vue

This article will give you a detailed introduction to how to use umy-ui in vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Download umy-ui http://www.umyui.com/

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

2. Create a file to store 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);

It is best to use on-demand import and use babel-plugin-component to reduce the size of the project.

npm install babel-plugin-component

3. Set up in babel.config.js

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

Introduce on demand

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

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

In main. Just import the file into js. Of course, the above code can also be written directly into main.js, but the code is not that elegant.

4. The biggest The advantage is to use virtual tables. When the data is very large, using virtual tables will not appear laggy

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

JS code

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()
  },
};

Recommended learning:vue.js tutorial

The above is the detailed content of How to use umy-ui in vue. For more information, please follow other related articles on the PHP Chinese website!