vue+element 增删改查
//table列表 <template> <div> <el-container style="height: 450px; border: 1px solid #eee"> <el-container> <p style="line-height:40px; padding-left: 8px;box-sizing: border-box;"> 用户名: <el-input v-model="search" size="mini" style="width:200px;outline:none;" placeholder="输入关键字搜索" /> <el-button size="small" type="primary">筛选</el-button> <el-button size="small" type="primary">新加</el-button> </p> <!-- :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" --> <el-main> <div></div> <el-table :data="tableData" style="width: 100%" > <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="用户名" prop="name"></el-table-column> <el-table-column label="性别" prop="sex"></el-table-column> <el-table-column label="电话" prop="tel"></el-table-column> <el-table-column > <template slot="header" slot-scope="scope"> <el-table-column label="操作" ></el-table-column> </template> <template slot-scope="scope" align="left" > <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, tableData)">删除</el-button> </template> </el-table-column> </el-table> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total" > </el-pagination> </div> </el-main> </el-container> </el-container> <el-dialog title="修改联系人信息" :visible.sync="dialogVisible" width="80%" :before-close="handleClose"> <Form :form='form' @closeModel="close" @datas="insert" ></Form> <span slot="footer" class="dialog-footer"> </span> </el-dialog> </div> </template> <script> import Form from './Form' export default { data() { return { pagesize: 5, currentPage: 1, form: { id: '', name: '', tel: '', section: '', position: '', sex: '', }, dialogVisible: false, tableData: [], search: "", }; }, created() { this.listdata(); }, methods: { // 获取列表 listdata() { this.$http.post(`https://`, { pageNum: this.currentPage, pageSize: this.pagesize, }) .then((res) => { this.total = res.total; this.tableData = res.data; console.log(this.tableData); }); }, handleSizeChange(val) { this.pagesize = val console.log(`每页 ${val} 条`); this.listdata(); }, handleCurrentChange(val) { this.currentPage = val console.log(`当前页: ${val}`); this.listdata(); }, //修改保存 insert(){ this.dialogVisible = false }, //修改取消 close(){ this.dialogVisible = false }, handleEdit(index, row) { this.dialogVisible = true console.log(index, row); this.form=row }, handleDelete(index, row) { console.log(index, row); row.splice(index, 1); } }, components: { Form } }; </script> <style> .el-header { background-color: whitesmoke; color: #333; line-height: 30px; } ::-webkit-scrollbar { display: none; } .el-aside { color: #333; } </style> //修改form表单 <template> <div class="form"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="id"> <el-input v-model="form.id"></el-input> </el-form-item> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="电话号码" prop="tel"> <el-input v-model="form.tel"></el-input> </el-form-item> <el-form-item label="职位" prop="position"> <el-input v-model="form.position"></el-input> </el-form-item> <el-form-item label="部门" prop="section"> <el-input v-model="form.section"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="form.sex" placeholder="性别"> <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit(form)">立即创建</el-button> <el-button @click="onClose(form)">取消</el-button> </el-form-item> </el-form> </div> </template> <script> export default { props:['form'], data() { return { form: { id: '', name: '', tel: '', section: '', position: '', sex: '', } } }, methods: { onSubmit(form) { this.$emit('datas',this.form) }, onClose(form){ this.$emit('closeModel') // this.$refs.form.resetFields() } } } </script> <style> </style>