umy-ui解决上万条数据全选卡顿问题

安装

npm install umy-ui
yarn add umy-ui

引入

完整引入

在 main.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

在 babel.config.js 中进行设置

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

在 main.js 中添加按需引入代码

import { UTable } from "umy-ui";
Vue.use(UTable);

示例

 <template>
  <u-table
    :data="tableData"
    :border="false"
    style="width: 100%">
    <template slot="empty">
          没有查询到符合条件的记录
     </template>
    <u-table-column
      prop="name"
      label="名字"
      width="180">
    </u-table-column>
    <u-table-column
      prop="sex"
      label="性别"
      width="180">
    </u-table-column>
    <u-table-column
      prop="age"
      label="年龄">
      <template v-slot="scope">
        <el-select v-model="scope.row.sex">
          <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>
    </u-table-column>
  </u-table>
</template>

<script>
  export default {
    data() {
      return {
        sexList: [
           { value: 1,label: '男' },
           { value: 2,label: '女'},
           { value: 3,label: '未知'}
        ],
        tableData: [{
          sex: '男',
          name: '王小虎',
          age: '15'
        }, {
          sex: '女',
          name: '王小明',
          age: '15'
        }, {
          sex: '女',
          name: '王小丽',
          age: '15'
        }, {
          sex: '未知',
          name: '王小狗',
          age: '15'
        }]
      }
    }
  }
</script>

甚至你还能这样做，都是兼容的
使用 element-ui 中的 table 组件，在外层用 u-table 包裹起来就行了

 <template>
  <u-table
    :data="tableData"
    :border="false"
    :max-height="tableHeight"
    use-virtual
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      align="center"
      type="selection"
      width="55"
    ></el-table-column>
    <el-table-column
      label="单位简称"
      prop="nameSimplify"
    ></el-table-column>
    <el-table-column
      label="级别"
      prop="levelCN"
    ></el-table-column>
  </u-table>
</template>

<script>
  export default {
    data() {
      return {
        sexList: [
           { value: 1,label: '男' },
           { value: 2,label: '女'},
           { value: 3,label: '未知'}
        ],
        tableData: [{
          sex: '男',
          name: '王小虎',
          age: '15'
        }, {
          sex: '女',
          name: '王小明',
          age: '15'
        }, {
          sex: '女',
          name: '王小丽',
          age: '15'
        }, {
          sex: '未知',
          name: '王小狗',
          age: '15'
        }]
      }
    }
  }
</script>