console
var Main = {
data() {
return {
tableRules: {
name: [
{
required: true,
message: '请选择数据',
}]
},
datas:[
],
tableData:[
{
name: '',
sex: '2',
date: '2'
},
{
name: '',
sex: '2',
date: '2'
}
]
};
},
methods:{
async addBtn()
{
const errMap = await this.$refs.currentTable.fullValidate().catch(errMap => errMap)
console.log(errMap)
if (errMap) {
console.log('校验失败')
}
console.log(this.tableData[1].name)
},
mergeRowMethod({
row,
rowIndex,
$rowIndex,
column,
columnIndex,
$columnIndex,
data,
}) {
if (column.property && column.property === 'name') {
if ($rowIndex === 0) {
return {
rowspan: this.tableData.length,
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 1,
}
}
} else {
return {
rowspan: 1,
colspan: 1,
}
}
},
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils@2.7.7"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@2.9.15"></script>
<div id="app">
<template>
<div>
<div>
<button @click="addBtn">点击校验</button>
</div>
<vxe-table
border
:span-method="mergeRowMethod"
ref="currentTable"
:edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
:edit-rules="tableRules"
height="500"
:data="tableData">
<vxe-table-column field="name" title="Name">
<template v-slot:edit="scope">
<span>2d</span>
<vxe-input
v-model="scope.row.name"/>
</template>
<template v-slot="scope">
<vxe-input
v-model="scope.row.name"/>
</template>
</vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="date" title="Date"></vxe-table-column>
<vxe-table-column field="address" title="Address"></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
@import url("//unpkg.com/vxe-table/lib/style.css");