SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
  data() {
    return {
      loading: false,
      tableData: [],
      columns: [],
    }
  },
  created () {
      this.loadList(600)

    /* this.loading = true
    setTimeout(() => {
      var list = []
      for(var index = 0; index < 10000; index++){
        list.push({
          name: 'test' + index,
          sex: 'Man',
          date: '2019-05-01'
        })
      }
      const startTime = Date.now()
      this.tableData = list
      this.loading = false
      this.$nextTick(() => {
        console.log(`渲染完成 ${Date.now() - startTime} 毫秒`)
      })
    }, 300) */

  },
  mounted() {
      console.log('mounted')

      this.$nextTick(() => {
          //console.log(this.$refs.xTable)
          // window.vm = this.$refs.xTable
        
        // console.log(this.$refs.xTable.triggerCheckAllEvent)
        // 大数据的全选 会卡顿的问题
        // 超过5k还是会卡顿
        /* const $xTable = this.$refs.xTable
        this.$refs.xTable.triggerCheckAllEvent = (e, value) => {
            console.log('triggerCheckAllEvent', value)
            $xTable.setAllCheckboxRow(value);
        } */
          
          const xGrid = this.$refs.xGrid
          const columns = [
              {
                type: 'checkbox',
                width: 60
              },
              {
                // title: '序号',
                type: 'seq',
                // fixed: 'left',
                width: 100
              },
              {
                title: 'Name',
                field: 'name',
                width: 100
              },
              {
                title: 'sex',
                field: 'Sex',
                width: 200
              },
              {
                title: 'rate',
                field: 'Rate',
                width: 200
              },
              {
                title: 'region',
                field: 'region',
                width: 100
              },
              {
                title: 'time',
                field: 'time',
                width: 200
              },
              {
                title: 'Address',
                field: 'address',
                width: 300
              },
              {
                title: 'createTime',
                field: 'createTime',
                width: 200
              },
              {
                title: 'attr1',
                field: 'attr1',
                width: 200
              },
              {
                title: 'attr2',
                field: 'attr2',
                width: 200
              },
              {
                title: 'attr3',
                field: 'attr3',
                width: 200
              },
              {
                title: 'attr4',
                field: 'attr4',
                width: 200
              },
              {
                title: 'attr5',
                field: 'attr5',
                width: 200
              },
              {
                title: 'attr6',
                field: 'attr6',
                width: 200
              },
              {
                title: 'attr7',
                field: 'attr7',
                width: 200
              },
              {
                title: 'attr8',
                field: 'attr8',
                width: 200
              },
              {
                title: 'attr9',
                field: 'attr9',
                width: 200
              },
             {
                title: 'attr10',
                field: 'attr10',
                width: 200
              },
              {
                title: 'age',
                field: 'age',
                width: 200
              },
          ]
        

        

          this.columns = columns
          
          // xGrid.loadColumn(columns)

          // xGrid.reloadColumn(columns)
      })
      
  },
  methods: {
    changeColumns() {
        const xGrid = this.$refs.xGrid
        const columns = [
            {
                type: 'checkbox',
                width: 60
            },
            {
                // title: '序号',
                type: 'seq',
                // fixed: 'left',
                width: 100
            },
            {
                title: 'sex 1644' + new Date().getTime(),
                field: 'Sex' + new Date().getTime(),
                width: 200
            },
            {
            title: 'Name',
            field: 'name',
            width: 100
            },
        ]
        this.columns = columns
        
        const xTable = this.$refs.xTable
        if (!xTable) return
         xTable.reloadColumn(columns)
    },
    sortChange({ 
        column, property, 
        order , sortBy, sortList, $event
    }) {
      /* const filed = property
      const sort = column.sortBy
      console.log('property', property)
      console.log('sort', sort)
      console.log('order', order)
      let sortField = ''
      if (typeof column.sortable === "string") {
        sortField = column.sortable
      } else if (typeof column.sortable ===  "string") {
        sortField = camelCaseToUnderScoreCase(column.sortable)
      } else {
        sortField = camelCaseToUnderScoreCase(sort)
      } */
        // this.loadList(600)
        this.tableData = data
    },
    checkboxAll(data) {
        console.log('checkboxAll')
        // console.log('checkboxAll', JSON.stringify(data))
        return
    },
    setCheckbox() {
        // const xTable = this.$refs.xTable
        // xTable.setCheckboxRow(this.tableData, true)
    },
    loadList (size) {
        this.loading = true
        this.mockList(size).then(data => {
            this.loading = false
            this.tableData = Object.freeze(data)
            const xGrid = this.$refs.xGrid
            xGrid.reloadData(this.tableData)

        // 使用函数式加载,阻断 vue 对大数据的监听
        const xTable = this.$refs.xTable
        if (!xTable) return
        const startTime = Date.now()
        if (xTable) {
            this.loading = false
            this.tableData = Object.freeze(data)
            xTable.refreshScroll();
            console.log(xTable.getScroll())
            /* this.$refs.xTable.reloadData(data).then(() => {
            //this.$XModal.message({ content: `渲染 ${size} 行,用时 ${Date.now() - startTime}毫秒`, status: 'info' })
                this.loading = false
                xTable.refreshScroll();
            }) */

            const xGrid = this.$refs.xGrid
            xGrid.reloadData(this.tableData)
        }
        })
    },
    mockList (size) {
        return new Promise(resolve => {
        const list = []
        for (let index = 0; index < size; index++) {
            list.push({
            id: index,
            name: `名称${index}`,
            checked: false,
            sex: '0',
            num: 123,
            age: Math.random(),
            num2: 234,
            rate: 3,
            address: 'shenzhen'
            })
        }
        resolve(list)
        })
    },
    getSelectEvent () {
        let selectRecords = this.$refs.xTable.getCheckboxRecords()
        this.$XModal.alert(selectRecords.length)
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>

<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table@3.3.1"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3.6.11"></script>

<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新@@asdfs 版本 -->

<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->
<!-- <script src="https://unpkg.com/vxe-table@2.10.13/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@2.10.13/lib/index.css"> -->

<!-- <script src="https://unpkg.com/vxe-table@3.1.1/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@3.1.1/lib/index.css"> -->

<!-- <script src="https://unpkg.com/vxe-table@2.9.26/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@2.9.26/lib/index.css"> -->


<div id="app">
  <template>
    <div>
      <!-- <vxe-table show-overflow height="400" :loading="loading" :data="tableData">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="date" title="Date"></vxe-column>
      </vxe-table> -->
        <vxe-button @click="changeColumns()"></vxe-button>
        <p> vxe-grid </p>
        <vxe-grid
          border
          resizable
          show-overflow
          show-header-overflow
          highlight-hover-row
          highlight-current-row
          ref="xGrid"
          height="300"
          :columns="columns"
          :loading="loading"
          :toolbar-config="{slots: {buttons: 'toolbar_buttons'}}"
          :checkbox-config="{checkField: 'checked' }">
        </vxe-grid>
     <vxe-toolbar>
        <template #buttons>
        <vxe-button @click="loadList(3000)">3k条</vxe-button>
        <vxe-button @click="loadList(5000)">5k条</vxe-button>
        <vxe-button @click="loadList(10000)">1w条</vxe-button>
        <vxe-button @click="loadList(50000)">5w条</vxe-button>
        <vxe-button @click="loadList(100000)">10w条</vxe-button>
        <vxe-button @click="loadList(200000)">20w条</vxe-button>
        <vxe-button @click="$refs.xTable.setAllCheckboxRow(true)">所有选中</vxe-button>
        <vxe-button @click="setCheckbox">设置选中</vxe-button>
        <vxe-button @click="$refs.xTable.clearCheckboxRow()">清除选中</vxe-button>
        <vxe-button @click="getSelectEvent">获取选中</vxe-button>
        </template>
    </vxe-toolbar>
    <!-- fixed="right"         :data="tableData"   -->
   
   <p> vxe-table </p>
   <vxe-table
        border
        :data="tableData"
        resizable
        show-overflow
        row-key="id"
        row-id="id"
        show-header-overflow
        highlight-hover-row
        highlight-current-row
        ref="xTable"
        height="300"
        :export-config="{}"
        :loading="loading"
        :checkbox-config="{reserve:true}"
        :scroll-x=" { 
        gt: 10, 
        oSize:  10
        }"
        :checkbox-config="{checkField: 'checked'}"
        @sort-change="sortChange"
        @checkbox-all="checkboxAll">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column type="seq" width="100" ></vxe-table-column>
        <vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>
        <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>
        <vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>
        <vxe-table-column field="region" title="Region" width="200"></vxe-table-column>
        <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
        <vxe-table-column field="address" title="Address" width="300"></vxe-table-column>
        <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>
        <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>
        <vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>
        <vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>
        <vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>
        <vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>
        <vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>
        <vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>
        <vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>
        <vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>
        <vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>
        <vxe-table-column field="attr10" title="Attr10" width="200"></vxe-table-column>
        <vxe-table-column field="age" title="Age" width="200" sortable></vxe-table-column>
    </vxe-table> 


    
    </div>

     <!-- <vxe-table
        height="300"
          border
          resizable
          show-overflow
          :data="tableData"
          :edit-config="{trigger: 'click', mode: 'cell'}">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column type="expand" width="60">
            <template #content="{ row, rowIndex }">
              <ul class="expand-form">
                <li>
                  <span class="title">Name:</span>
                  <span class="content">
                    <vxe-input v-model="row.name"></vxe-input>
                  </span>
                </li>
                <li>
                  <span class="title">Sex:</span>
                  <span class="content">
                    <vxe-input v-model="row.sex"></vxe-input>
                  </span>
                </li>
                <li>
                  <span class="title">Age:</span>
                  <span class="content">
                    <vxe-input v-model="row.age"></vxe-input>
                  </span>
                </li>
              </ul>
            </template>
          </vxe-column>
          <vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
          <vxe-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
          <vxe-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-column>
        </vxe-table> -->
  </template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");