vue + table + dialog
表格展示
表格数据编辑
<template>
<div>
<el-table :data="dataSource" size="mini" style="max-height: 400px">
<el-table-column prop="name" label="名字" />
<el-table-column prop="desc" label="描述" />
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<i class="el-icon-edit" @click="edit(scope)"></i>
<i class="el-icon-delete" @click="deleteData(scope)" />
</template>
</el-table-column>
</el-table>
<div style="text-align: center">
<i class="el-icon-circle-plus-outline" @click="visible = true"></i>
</div>
<el-dialog title="标题" :visible.sync="visible" width="30%" @close="close">
<el-form :model="formData" ref="formData" label-width="100px" :rules="rules">
<el-col>
<el-form-item label="名字" prop="name">
<el-input v-model="formData.name" />
</el-form-item>
</el-col>
<el-col>
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="formData.description" />
</el-form-item>
</el-col>
</el-form>
<span slot="footer">
<el-button size="small" @click="close">取消</el-button>
<el-button size="small" type="primary" @click="submit">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dataSource: [],
formData: {},
visible: false,
index: -1,
rules: {
name: [{ required: true, message: "请输入名字", trigger: "blur" }],
},
};
},
methods: {
submit() {
this.$refs["formData"].validate((valid) => {
if (valid) {
if (this.index == -1) {
this.dataSource = [...this.dataSource, this.formData];
} else {
this.dataSource.splice(this.index, 1, this.formData);
}
this.close();
}
});
},
edit(data) {
this.visible = true;
this.index = data.$index;
this.formData = data.row;
},
deleteData(data) {
this.dataSource.splice(data.$index, 1);
},
close() {
this.visible = false;
this.index = -1;
this.formData = {};
},
},
};
</script>