<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="public/element/index.css">
<script src="public/vue.min.js"></script>
<script src="public/element/index.js"></script>
</head>
<body>
<div id="app">
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
</el-table>
<el-dialog :visible.sync="edit_dialog">
<el-form :model="edit_form">
<el-form-item label="序号" label-width="80px">
<el-input v-model="edit_form.name" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="edit_dialog = false">取 消</el-button>
<el-button type="primary" @click="handleSet('edit_form')">确 定</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data(){
return{
tableData:[
{name:'joe'},
{name:'joe'},
{name:'joe'},
{name:'joe'},
{name:'joe'},
],
edit_dialog:false,
edit_form:{
name:""
},
editIndex:""
}
},
methods:{
handleEdit(index, row) {
this.edit_dialog = true;
this.editIndex = index;
this.edit_form = {
name:row.name
}
},
handleSet(index, row){
this.edit_dialog = false;
Vue.set(this.tableData, this.editIndex, this.edit_form);
JSON.stringify(this.tableData);
},
}
})
</script>
</html>