SOURCE

var Main = {
    data () {
        return {
            demo1: {
                loading: false,
            },
            tableData: []
        }
    },
    created () {
    },
    mounted() {
        const data = this.mockList(600)
        console.log('xxxxxxx')
        this.tableData = data
        // this.$refs.xTable.loadData(data)
    },
    methods: {
        mockList(number) {
            const list = []
            for (let index = 0; index < size; index++) {
                list.push({
                    checked: false,
                    name: `名称${index}`,
                    sex: '0',
                    num: 123,
                    age: 18,
                    num2: 234,
                    rate: 3,
                    address: 'shenzhen'
                })
            }
            return list
        },
    }
};

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

<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table@3"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table@3.3.1"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table@4.3.10"></script> -->

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

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

<div id="app">
    <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>

    <!-- <vxe-table
        border
        show-overflow
        keep-source
        ref="xTable"
        height="500"
        :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> -->
</div>

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

.my-dropdown1 {
    height: 200px;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background-color: #fff;
}
.list-item1:hover {
    background-color: #f5f7fa;
}
.my-dropdown2 {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background-color: #fff;
}
.list-item2:hover {
    background-color: #f5f7fa;
}
.my-dropdown3 {
    width: 400px;
    background-color: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
.my-dropdown4 {
    width: 600px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}