导航
- 实现方案一（缺查询功能）
- 实现方案二(缺查询功能)
实现方案一（缺查询功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow" >
<title>Vue增删改查</title>
<style>
#app{
width:1024px;
margin: 0 auto;
}
.add-btn{
margin-top: 20px;
width: 100%;
}
.body{
margin-top:20px;
}
</style>
</head>
<body>
<div id="app">
<h1>职位的增删改查</h1>
<div class="head">
<el-row :gutter="20">
<el-col :span="6">
<el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
</el-col>
<el-col :span="6">
<el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
</el-col>
<el-col :span="6">
<el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
</el-col>
<el-col :span="6">
<el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
</el-col>
</el-row>
<el-button type="primary" @click="addUser" class="add-btn" plain>添加信息</el-button>
</div>
<!-- 主体内容 -->
<div class="body">
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="序号" width="180"><template slot-scope="scope"> {{scope.$index + 1 }} </template></el-table-column>
<el-table-column prop="name" label="公司名" width="180"></el-table-column>
<el-table-column prop="position" label="职位"></el-table-column>
<el-table-column prop="major" label="专业"></el-table-column>
<el-table-column prop="number" label="数量"></el-table-column>
<el-table-column prop="birthday" label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
<el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<!-- 编辑框 -->
<el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<div>
<el-form ref="form" :model="editObj" label-width="80px">
<el-form-item label="公司名"><el-input v-model="editObj.name"></el-input></el-form-item>
<el-form-item label="职位"><el-input v-model="editObj.position"></el-input></el-form-item>
<el-form-item label="专业"><el-input v-model="editObj.major"></el-input></el-form-item>
<el-form-item label="数量"><el-input v-model="editObj.number"></el-input></el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el:'#app',
data: function(){
return{
userInfo:{
name:'',
position: '',
major: '',
number: '',
},
tableData: [{
name:'互联网+学院',
position: '专职教师',
major: '对外贸易',
number: '2',
},{
name:'徐州重工',
position: '工厂车研发部工程师',
major: '精密机械制造',
number: '12',
},{
name:'北京青码科技',
position: '前端开发工程师',
major: 'Vue、React',
number: '4',
}
],
dialogVisible: false,
editObj:{
name:'',
position: '',
major: '',
number: '',
},
userIndex:0,
}
},
methods:{
addUser(){
if(!this.userInfo.name){
this.$message({
message: '请输入你的公司名！',
});
return;
}
if(!this.userInfo.position){
this.$message({
message: '请输入你的职位！',
type: 'warning'
});
return;
}
if (!this.userInfo.major) {
this.$message({
message: '请输入你的专业！',
type: 'warning'
});
return;
}
if (!this.userInfo.number) {
this.$message({
message: '请输入数量！',
type: 'warning'
});
return;
}
this.tableData.push(this.userInfo);
this.userInfo = {
name:'',
position: '',
major: '',
number: '',
};
},
delUser(idx){
this.$confirm('确认删除此用户信息？')
.then(_ => {
this.tableData.splice(idx, 1);
})
.catch(_ => {});
},
editUser(item,idx){
this.userIndex = idx;
this.editObj = {
name: item.name,
position: item.position,
major: item.major,
number: item.number,
};
this.dialogVisible = true;
},
handleClose(){
this.dialogVisible = false;
},
confirm(){
this.dialogVisible = false;
Vue.set(this.tableData, this.userIndex, this.editObj);
}
},
})
</script>
</body>
</html>
实现方案二(缺查询功能)
<template>
<div>
<!-- 查询 -->
<!--这是新增的查询功能-->
<el-input
type="text"
placeholder="请输入要查询的条件"
style="width: 25%"
v-model="search"
class="searchClass"
/>
<el-button type="success" @click="search">搜索</el-button>
<!-- 添加数据 -->
<div id="tianjia">
<el-input
type="text"
name="id"
v-model="addDetail.id"
value=""
placeholder="请输入公司代号"
style="width: 13%"
/>
<el-input
type="text"
name="name"
v-model="addDetail.name"
value=""
placeholder="请输入公司名称"
style="width: 13%"
/>
<el-input
type="text"
name="adress"
v-model="addDetail.adress"
value=""
placeholder="请输入公司地址"
style="width: 13%"
/>
<el-button type="success" size="big" @click.native.prevent="adddetail()"
><font color="#f0f8ff" size="2px">添加</font>
</el-button>
</div>
<!-- 展示数据 -->
<el-form>
<el-table :data="newsList" style="width: 100%" align="center">
<el-table-column
prop="id"
label="公司代号"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="公司名称"
width="180"
></el-table-column>
<el-table-column
prop="adress"
label="公司地址"
width="180"
></el-table-column>
<!--增加 操作 菜单 以及旗下的子菜单 增加 修改-->
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<!--修改按钮-->
<el-button
@click="handleEdit(scope.$index, scope.row)"
type="info"
size="small"
>修改</el-button
>
<!--删除按钮-->
<el-button
@click.native.prevent="deletedetail(scope.$index, newsList)"
type="danger"
size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
<!--编辑弹框部分-->
<div>
<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%">
<!--这就是一个表格-->
<el-form :model="form">
<!--公司ID-->
<el-form-item label="公司ID">
<el-input v-model="form.id" autocomplete="off"></el-input>
</el-form-item>
<!--公司名称-->
<el-form-item label="公司名称">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<!--公司地址-->
<el-form-item label="公司地址">
<el-input v-model="form.adress" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<!--确定, 取消 按钮-->
<div>
<el-button type="primary" @click.native.prevent="editSubForm"
>确定</el-button
>
<el-button @click.native.prevent="dialogFormVisible = false"
>取消</el-button
>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
var _index;
export default {
data() {
return {
dialogFormVisible: false,
editForm: [],
form: {
id: "",
name: "",
adress: "",
},
selectList: {},
search: "",
addDetail: {},
newsList: [
{
id: "001",
name: "阿里巴巴",
adress: "杭州湖畔花园",
},
{
id: "002",
name: "工银科技",
adress: "北京朝阳区天源祥泰大厦",
},
{
id: "003",
name: "IBM",
adress: "海淀区中关村软件园",
},
{
id: "004",
name: "华为",
adress: "北京海淀区北研所",
},
{
id: "005",
name: "网龙",
adress: "福州长乐湖",
},
{
id: "006",
name: "BOSS直聘",
adress: "北京朝阳区太阳宫",
},
{
id: "007",
name: "滴滴",
adress: "北京海淀区上地",
},
{
id: "008",
name: "中国软件",
adress: "北京海淀区北下关",
},
{
id: "009",
name: "小米",
adress: "北京海淀区清河",
},
{
id: "010",
name: "跟谁学",
adress: "北京海淀区中关村",
},
{
id: "011",
name: "美团",
adress: "北京海淀区中关村",
},
{
id: "012",
name: "今日头条",
adress: "北京海淀区清河",
},
],
};
},
methods: {
adddetail() {
console.log(1);
this.$confirm("确认进行添加", "是否继续?", "提示", {
confirmButtonText: "确定",
confirmButtonText: "取消",
})
.then(() => {
this.newsList.push({
id: this.addDetail.id,
name: this.addDetail.name,
adress: this.addDetail.adress,
}),
this.$message({
type: "success",
message: "添加成功",
});
})
.catch((err) => {
this.$message({
type: "error",
message: err,
});
});
},
deletedetail: function (index, rows) {
this.$confirm("此操作将删除数据,", "是否继续?", "提示", {
confirmButtonText: "确定",
confirmButtonText: "取消",
type: "warning",
})
.then(() => {
this.newsList.splice(index, 1);
this.$message({
type: "success",
message: "删除成功",
});
})
.catch((err) => {
this.$message({
type: "error",
message: err,
});
});
},
handleEdit(index, row) {
this.dialogFormVisible = true;
this.form = Object.assign({}, row);
_index = index;
},
editSubForm() {
var editData = _index;
this.newsList[editData].id = this.form.id;
this.newsList[editData].name = this.form.name;
this.newsList[editData].adress = this.form.adress;
this.dialogFormVisible = false;
},
searchFn: function (e) {
var key = e.target.value;
if (key) {
var serchArray = [];
this.newsList.forEach(function (item) {
if (item.id.indexOf(key) > -1) {
serchArray.push(item);
}
if (item.name.indexOf(key) > -1) {
serchArray.push(item);
}
if (item.adress.indexOf(key) > -1) {
serchArray.push(item);
}
});
this.getShowData1(serchArray);
} else {
this.getShowData1(this.newsList);
}
},
getShowData: function (arr) {
this.clonenewsList = JSON.parse(JSON.stringify(arr));
},
getShowData1: function (arr) {
this.newsList = JSON.parse(JSON.stringify(arr));
},
},
};
</script>
<style>
.searchClass {
margin-left: 600px;
}
#tianjia {
margin-left: 600px;
}
.title {
padding: 10px;
border-bottom: 1px solid #00ffff;
}
.mask {
width: 300px;
height: 250px;
background: rgba(255, 255, 255, 1);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 47;
border-radius: 5px;
}
#mask {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: fixed;
z-index: 4;
top: 0;
left: 0;
}
</style>
