vex-table地址:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install
需求:表格多行數據編輯後進行統一保存
頁面效果如下(編輯前、編輯後):
點擊後保存後的數據格式:
頁面代碼如下:
注:data爲數據源
//HTML
<el-button type="primary" @click="save()">保存</el-button>
<vxe-table border height="100%" stripe highlight-hover-row :data="dataList" :edit-config="{trigger: 'click', mode: 'row', showStatus: true}" ref="xTable">
<vxe-table-column field="name" title="姓名" width="180" fixed="left"></vxe-table-column>
<vxe-table-column field="sex" title="性別" width="130"></vxe-table-column>
<vxe-table-column field="age" title="年齡" :edit-render="{name: 'input', attrs: {type: 'number'}}" width="130">
</vxe-table-column>
</vxe-table>
//JS
export default {
data(){
return {
dataList: [{
id: '01',
name: '測試1',
age:'20',
sex:'女'
},{
id: '02',
name: '測試2',
age:'22',
sex:'男'
}]
}
},
methods:{
save(){
let updateRecords = this.$refs.xTable.getUpdateRecords()
console.log(updateRecords)
}
}
}