console
new Vue({
el: '#app',
data() {
return {
tableData: [],
sexList: [
{ label: '', value: '' },
{ label: '男', value: '1' },
{ label: '女', value: '0' },
],
}
},
created() {
this.mockList(3000).then(data => {
this.tableData = data
})
},
methods: {
changeData() {
this.mockList(1000).then(data => {
this.tableData = data
})
},
mockList(size) {
return new Promise(resolve => {
const list = []
for (let index = 0; index < size; index++) {
list.push({
name: `名称${index}`,
sex: '0',
num: 123,
age: 18,
num2: 234,
rate: 3,
address: 'shenzhen ygjkhjk'
})
}
resolve(list)
})
},
delRow() {
const newData = [...this.tableData];
newData.splice(1, 1);
this.tableData = newData.map((item, index) => {
const newItem = { ...item, _rowindex: index };
return newItem;
});
}
}
})
<div id="app">
<div style="height: 500px">
<vxe-table
ref="table1"
border
show-overflow
highlight-hover-row
height="100%"
:sort-config="{trigger: 'cell'}"
:data="tableData"
:scroll-y="{
gt: 3
}"
:edit-config="{trigger: 'click', mode: 'cell'}"
:checkbox-config="{
reserve: true
}"
>
<vxe-table-column type="checkbox" width="100"></vxe-table-column>
<vxe-table-column type="seq" width="100"></vxe-table-column>
<vxe-table-column field=name title=name sortable></vxe-table-column>
<vxe-table-column field=sex title=sex :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
<vxe-table-column field=age title=age></vxe-table-column>
<vxe-table-column field=address title=address show-overflow></vxe-table-column>
<vxe-table-column field=cz title=cz show-overflow>
<template v-slot="{ row }">
<div>
<button
title="删除"
@click="delRow(row)"
>
<span>删除</span>
</button>
</div>
</template>
</vxe-table-column>
</vxe-table>
</div>
</div>
<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"></script>