umy-ui，解决表格字段很多，数据过万卡顿问题，可结合element-table使用

前提：该ui只支持vue2版本，更多表格样式可查看官网地址：www.sogou.com/link?url=DS…

一.使用npm安装

npm install umy-ui

二. 在main.js中按需引入代码

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

三.页面中使用

  <u-table
    :data="tableData"
    border
    style="width: 100%">
    <u-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </u-table-column>
    <u-table-column
      prop="name"
      label="姓名"
      width="120">
    </u-table-column>
    <u-table-column
      prop="province"
      label="省份"
      width="120">
    </u-table-column>
    <u-table-column
      prop="city"
      label="市区"
      width="120">
    </u-table-column>
    <u-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip
      width="300">
    </u-table-column>
    <u-table-column
      prop="zip"
      label="邮编"
      min-width="120">
    </u-table-column>
    <u-table-column
      fixed="right"
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </u-table-column>
  </u-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

如果你使用的是elementUI，可以配合element-table组件去使用

  <u-table
    :data="tableData"
    :border="false"
    :max-height="tableHeight"
    use-virtual
    @selection-change="handleSelectChange"
  >
    <el-table-column
      align="center"
      prop="name"
      label="姓名"
      width="55"
    ></el-table-column>
    <el-table-column
      label="性别"
      prop="sex"
    ></el-table-column>
    <el-table-column
      label="年龄"
      prop="age"
    ></el-table-column>
  </u-table>
</template>

<script>
  export default {
    data() {
      return {
      tableHeight:'600',
        sexList: [
           { value: 1,label: '男' },
           { value: 2,label: '女'},
           { value: 3,label: '未知'}
        ],
          tableData: [{
          sex: '男',
          name: '周瑜',
          age: '25'
        }, {
          sex: '女',
          name: '小乔',
          age: '19'
        }, {
          sex: '男',
          name: '云中君',
          age: '22'
        }, {
          sex: '女',
          name: '瑶',
          age: '18'
        }]
      }
    }
  }
</script>