关于vue.js:umyui-一个基于-vue-的-PC-端表格UI库解决万级数据渲染卡顿问题过万数据点击全选卡顿等等问题

npm 装置

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