<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button @click="handleDetail(scope.row)">
编辑
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="编辑"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form :model="rowDialog" label-width="80px">
<el-form-item lable="价格">
<el-input-number v-model="rowDialog.rowPrice">
</el-input-number>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
dialogVisible: false,
rowDialog:{},
}
},
mounted(){
this.tableList();
},
methods: {
handleDetail(row){
this.dialogVisible = true;
//主要代码,复制源数据到rowDialog
this.rowDialog = Object.assign({},row);
},
handleClose(done) {
//弹框点击确定
this.$Api.cardGetRecord('update',{
id:this.rowDialog .id,
player:this.rowDialog .rowPrice
}).then(res=>{
if(res){
this.$message({
message:'提交成功',
type:'success'
})
}
})
},
tableList(){
this.tableData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
}
</script>
vue 使用elemenyui table展示列表数据如何进行编辑修改
最新推荐文章于 2024-06-25 15:15:37 发布