webpack4+express+mongodb+vue实现增删改查的示例

2020-06-14 06:27:07易采站长站整理

<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<el-button type="primary" style="margin-left:20px;" @click="query(true)">查 询</el-button>
<el-button type="success" @click="newAdd">新 增</el-button>
</el-form>
</div>
<div style="width:90%; margin: 0 auto; border: 1px solid #ebebeb; border-radius: 3px;overflow:hidden;">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="editFunc(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="delFunc(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="30%">
<el-form label-width="40px">
<div style="float:left;width:100%">
<el-form-item label="姓名">
<el-input v-model="add.name"></el-input>
</el-form-item>
</div>
<div style="float:left;width:100%">
<el-form-item label="年龄">
<el-input v-model="add.age"></el-input>
</el-form-item>
</div>
<div style="float:left;width:100%">
<el-form-item label="性别">
<el-select v-model="add.sex">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addConfirm">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="编辑"
:visible.sync="dialogVisible2"
width="30%">
<el-form label-width="40px">
<div style="float:left;width:100%">
<el-form-item label="姓名">
<el-input v-model="update.name"></el-input>
</el-form-item>
</div>
<div style="float:left;width:100%">