console
var Main = {
data () {
return {
tableData: []
}
},
methods:{
pushEvent () {
const newRow = {
id: new Date().getTime(),
name: `Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}`,
role: '',
sex: `Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}`,
age: 18,
address: ''
}
this.tableData.push(newRow)
this.$nextTick(() => {
const $table = this.$refs.tableRef
if ($table) {
$table.setEditRow(newRow)
}
})
},
cancelRowEvent () {
const $table = this.$refs.tableRef
if ($table) {
this.tableData.splice(0,1)
$table.clearEdit()
}
}
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://unpkg.com/vue@2.6.14">
</script>
<script src="https://unpkg.com/xe-utils">
</script>
<script src="https://unpkg.com/vxe-pc-ui@3.5.24">
</script>
<script src="https://unpkg.com/vxe-table@3.15.4">
</script>
<div id="app">
<template>
<div>
<p>Table 演示 scroll-x GT: 2</p>
<vxe-button status="primary" @click="pushEvent">新增(尾部)</vxe-button>
<vxe-button status="primary" @click="cancelRowEvent">取消</vxe-button>
<vxe-table border height="200px" :show-overflow="false" :cell-config="{}" size="mini" ref="tableRef1" :column-config="{
useKey: true,
resizable: true,
}" :row-config='{"useKey":true,"keyField":"id","isCurrent":true,"isHover":true}' :scroll-x="{
enabled:true,
gt:2
}" :data="tableData">
<vxe-table-column type="seq" width="70" fixed="left"></vxe-table-column>
<vxe-table-column type="checkbox" width="70" fixed="left"></vxe-table-column>
<vxe-table-column field="name" title="Name" width="100" resizable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" width="400" resizable></vxe-table-column>
<vxe-table-column field="age" title="Age" width="1000" resizable></vxe-table-column>
</vxe-table>
</div>
<div>
<p>Table 演示 scroll-x GT default : 100</p>
<vxe-button status="primary" @click="pushEvent">新增(尾部)</vxe-button>
<vxe-button status="primary" @click="cancelRowEvent">取消</vxe-button>
<vxe-table border height="200px" :show-overflow="false" :cell-config="null" size="mini" ref="tableRef2" :column-config="{
useKey: true,
resizable: true,
}" :row-config='{"useKey":true,"keyField":"id","isCurrent":true,"isHover":true}'
:scroll-x="{
enabled:true
}"
:data="tableData">
<vxe-table-column type="seq" width="70" fixed="left"></vxe-table-column>
<vxe-table-column type="checkbox" width="70" fixed="left"></vxe-table-column>
<vxe-table-column field="name" title="Name" width="100" resizable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" width="400" resizable></vxe-table-column>
<vxe-table-column field="age" title="Age" width="1000" resizable></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
@import url("https://unpkg.com/vxe-pc-ui@3.5.24/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.15.4/lib/style.css");