SOURCE

var Main = {
    data() {
        return {
            tableData: [],
            gridOptions: {
                border: true,
                filterConfig: {
                    // 此处修改了图标，但还是显示默认的filter图标
                    iconMatch: "vxe-icon--caret-bottom",
                },
                columns: [
                    { type: 'seq', width: 60 },
                    { type: 'checkbox', width: 60 },
                    { field: 'name', title: 'Name' },
                    { field: 'sex', title: 'Sex' },
                    { field: 'date', title: 'Date' },
                    { field: 'address', title: 'Address' }
                ],
                data: []
            }
        }
    },
    mounted() {
        var list1 = []
        var list2 = []
        for (var index = 0; index < 10000; index++) {
            list1.push({
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            })
            list2.push({
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            })
        }
        this.tableData = list1
        this.gridOptions.data = Object.freeze(list2)

        
        /* function mockList(number){
            const list = []
            for (let index = 0; index < size; index++) {
                list.push({
                    checked: false,
                    name: `名称__${index}`,
                    role: '',
                    sex: 'Man',
                    date: '2019-05-01',
                    time: 1556677810888 + index * 500,
                    region: 'ShenZhen',
                    address: 'address abc' + index
                })
            }
            return list
        }
        console.log('xxxx', mockList(1000))

        this.gridOptions.data = mockList(1000) */
    },
    methods: {
       
    }
};

Vue.createApp(Main).use(VXETable).mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue@next">
</script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils">
</script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/index.umd.js">
</script> -->
<script src="https://cdn.jsdelivr.net/npm/vxe-table@4.3.10/lib/index.umd.js">
</script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
	<div>
        <vxe-table
          height="300"
          border
          show-overflow
          keep-source
          ref="xTable"
          :data="tableData"
          :column-config="{resizable: true}"
          :export-config="{}"
          :checkbox-config="{checkField: 'checked'}"
          :edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column type="seq" width="100"></vxe-column>
          <vxe-column field="name" title="Name" sortable width="200" :edit-render="{autofocus: '.vxe-input--inner'}">
            <template #edit="{ row }">
              <vxe-input v-model="row.name" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="age" title="Age" width="200" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.age" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="sex" title="Sex" width="200" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.sex" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="rate" title="Rate" width="200"></vxe-column>
          <vxe-column field="region" title="Region" width="200"></vxe-column>
          <vxe-column field="time" title="Time" width="200"></vxe-column>
          <vxe-column field="address" title="Address" width="300" show-overflow></vxe-column>
          <vxe-column field="updateTime" title="UpdateTime" width="200"></vxe-column>
          <vxe-column field="attr1" title="Attr1" width="200"></vxe-column>
          <vxe-column field="attr2" title="Attr2" width="200"></vxe-column>
          <vxe-column field="attr3" title="Attr3" width="200"></vxe-column>
          <vxe-column field="attr4" title="Attr4" width="200"></vxe-column>
          <vxe-column field="attr5" title="Attr5" width="200"></vxe-column>
          <vxe-column field="attr6" title="Attr6" width="200"></vxe-column>
          <vxe-column field="attr7" title="Attr7" width="200"></vxe-column>
          <vxe-column field="attr8" title="Attr8" width="200"></vxe-column>
          <vxe-column field="attr9" title="Attr9" width="200"></vxe-column>
          <vxe-column field="createTime" title="CreateTime" width="200"></vxe-column>
        </vxe-table>
		<!-- <p>Table 演示</p>
		<vxe-table border :data="tableData" :filter-config="{iconNone: 'vxe-icon--remove', iconMatch: 'vxe-icon--circle-plus'}">
			<vxe-column type="seq" width="60" :filters="[{ data: '' }]" :filter-render="{
          name: 'ElInput',
          props: { placeholder: '请输入名称' },
        }"></vxe-column>
			<vxe-column field="name" title="Name" :filters="[{ data: '' }]" :filter-render="{
          name: 'ElInput',
          props: { placeholder: '请输入名称' },
        }"></vxe-column>
			<vxe-column field="sex" title="Sex" :filters="[{ data: '' }]" :filter-render="{
          name: 'ElInput',
          props: { placeholder: '请输入名称' },
        }"></vxe-column>
			<vxe-column field="date" title="Date"></vxe-column>
			<vxe-column field="address" title="Address"></vxe-column>
		</vxe-table> -->
		<p>Grid 演示</p>
        <div>
            <vxe-grid
                height="300"
                v-bind="gridOptions">
            </vxe-grid>
        </div>
	</div>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css");