Big data table stuck processing problem UMI UI

When developing large-scale projects or projects with too much data, we will cause the problem of form jamming and its thorny problems because of the large amount of data. Here I recommend that you can try using the UMI UI component library. Tens of thousands of data are much more convenient without jamming, and it is based on the element UI, I have also tried ant design vue, which can introduce non conflict on demand. Let me introduce the usage below

Instructions before use

1. The following text describes the key words element, ele and El table. If you don't know what this is, it's OK. You can be a novice. You can start by looking at the document directly!

2. Tables solve the Caton problem. The principle of virtual tables is to reduce the rendering of DOM nodes and dynamically render data through rolling function throttling

3. The basic table is actually an upgraded version of the element table. The table bug of ele is modified (if you want to use an ordinary table, you can use this table without installing other libraries). You can find that the example in the basic table is not configured with the attribute of use virtual.

4. The basic table does not use the use virtual attribute, which means that there is not much data in the table, and you only want an ordinary table. If you need a form card. Please pay attention to the virtual table section.

5. Using u-table to enable use virtual can support small merged rows and columns, such as two columns and two rows, and support multi-level headers. If there are more than two rows and two columns, the layout may be disordered, because some nodes are not rendered due to the principle of virtual scrolling.

6. Using u-table to open use virtual does not support expanding rows. If you need to expand rows, you need to expand rows in ux virtual table!

7.u-table does not support expanding rows, and UX grid is required for expanding rows.

8. UX grid solves the problem of card caused by multiple columns and rows. u-table solves the problem of multiple rows and does not solve the problem of multiple columns (if your columns exceed 70 +, you may need to use UX grid because you need to virtualize the columns at this time)

9. Key points: the virtual table integrates the things of the basic table (such as attributes / methods / events)!

10. The virtual table in this document means that it solves the problem of jam caused by large amount of data! The basic table is in the document, which means the upgraded El table (but it does not solve the problem of multiple data cards)!

11. The editing table is to solve the situation that the table cell has an input box or a selection time, which leads to a jam! This means that table cells have certain operations, and cells have custom components or UI library components, etc

11. With a table, how to export the table data to excel with style?, Please click the link: git address

Download the umy UI plug-in download the plug-in.

//Download plug-ins
npm install umy-ui

Register main. In the global js.

  import Vue from 'vue';
  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// Import style
  import App from './App.vue';

  Vue.use(UmyUi);

  new Vue({
    el: '#app',
    render: h => h(App)
  });

On demand import

With the help of Babel plugin component, we can only introduce the required components to reduce the project volume.
First, install the Babel plugin component:

// Download plug-ins
npm install babel-plugin-component -D

Then, the Add plugins in babelrc:

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "umy-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Next, if you only want to introduce some components, such as UTable and UTableColumn, (UTable is a table and UTableColumn is a table header), you need to use the main JS to write the following:

import Vue from 'vue';
import { UTable, UTableColumn } from 'umy-ui';
import App from './App.vue';

Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);
/* Or write as
 * Vue.use(UTable)
 * Vue.use(UTableColumn)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

The complete usage is as follows

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

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

Umy UI development documentation: Click the jump link