Anteriormente, la adición, eliminación, modificación y consulta de tablas se implementaron en vue, pero no había estilo, por lo que era feo. Esta vez, se utilizó el marco elementUI para implementar esta función. El estilo de la interfaz se optimizó. Si es necesario, puede copie directamente el código y ejecútelo. La premisa es instalar elementUI globalmente y agregarlos nuevamente después de la modificación. Si el contenido de búsqueda de la función de búsqueda no existe o si la información de búsqueda es incorrecta, la lista no cambiará (normalmente la lista debe estar vacío) porque no hay datos de fondo, es solo un error en la función de front-end. Espero que los jefes me perdonen (no rocíe), principalmente solo mire la lógica
<template>
<el-row>
<el-row>
<el-col :span="3"><el-button type="success" @click="adds()">新增</el-button></el-col>
</el-row>
<el-row>
<el-col :span="6"><el-input size="medium" v-model="input" placeholder="请输入姓名进行搜索"></el-input></el-col>
<el-col :span="3"><el-button type="primary" @click="search()">搜索</el-button></el-col>
</el-row>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column type="index" width="50">
</el-table-column> <!-- 这个为序号 -->
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column >
<!-- 让弹框显示 -->
<template slot-scope="scope">
<el-button type="primary" @click="sets(scope.row)">修改</el-button>
<el-button type="danger" @click="removes(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="新增" :visible.sync="el_show">
<el-form>
<el-form-item label="日期" :label-width="formLabelWidth">
<el-input v-model="date" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input placeholder="请输入姓名" v-model="name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input placeholder="请输入地址" v-model="address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="pushs()">新 增</el-button>
<el-button @click="err()">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="修改" :visible.sync="el_xiu">
<el-form>
<el-form-item label="日期" :label-width="formLabelWidth">
<el-input v-model="newtable.date" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input placeholder="请输入姓名" v-model="newtable.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input placeholder="请输入地址" v-model="newtable.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="trueset()">修 改</el-button>
<el-button @click="xg_err()">取 消</el-button>
</div>
</el-dialog>
</el-row>
</template>
<script>
export default {
data() {
return {
searchs:[],
input:null,
searchtableData: [ //搜索框初始数据
{
date: '2019-12-02',
name: '长安',
address: '长安归故里',
id:0
},
{
date: '2019-12-02',
name: '故里',
address: '故里归长安',
id:1
},
{
date: '2019-12-02',
name: '百里',
address: '尔来四万八千岁',
id:2
},
{
date: '2019-12-02',
name: '秦汉',
address: '不与秦塞通人烟',
id:3
},
{
date: '2019-12-02',
name: '李白',
address: '西当太白有鸟道',
id:4
}
],
tableData: [
{
date: '2019-12-02',
name: '长安',
address: '长安归故里',
id:0
},
{
date: '2019-12-02',
name: '故里',
address: '故里归长安',
id:1
},
{
date: '2019-12-02',
name: '百里',
address: '尔来四万八千岁',
id:2
},
{
date: '2019-12-02',
name: '秦汉',
address: '不与秦塞通人烟',
id:3
},
{
date: '2019-12-02',
name: '李白',
address: '西当太白有鸟道',
id:4
}
],
el_show:false,
el_xiu:false,
date:"",
name:"",
address:"",
newtable:{
date:"",
name:"",
address:"",
}, //修改内容暂存区
formLabelWidth: '120px',
newid:0 //存储点击的id
}
},
methods:{
//搜索
search:function(){
console.log(this.input);
this.tableData.map((item)=>{
if(this.input==null||this.input==''){
// this.$message({ 在循环中会直接弹出多个同样提示框（不可用）
// message: '搜索内容不存在或搜索字段错误',
// type: 'warning'
// });
this.tableData=this.searchtableData;
return;
}else if(item.name.includes(this.input)){ // eslint-disable-line no-unused-vars
this.searchs=[]; //每次搜索前清空，否则会一直追加
this.searchs.push(item);
console.log(this.searchs);
this.tableData=this.searchs;
console.log(this.tableData);
return;
}
})
},
//新增让弹框显示
adds:function(){
this.el_show=true;
},
//取消让弹框隐藏
err:function(){
this.el_show=false;
},
//删除某条信息
removes:function(v){
console.log(v.id)
this.newid=this.tableData.findIndex((item)=>{
return item.id==v.id;
})
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.tableData.splice(this.newid,1); //删除代码
this.searchtableData=this.tableData; //绑定搜索框初始数据
console.log(this.tableData)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//新增
pushs:function(){
if(!this.date||!this.name||!this.address){
this.$message.error('内容不能为空');
return;
}
//使用map方法获取到id的最大值
let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;
this.tableData.push({
date:this.date,
name:this.name,
address:this.address,
id:ids
})
this.searchtableData=this.tableData; //绑定搜索框初始数据
this.$message({
message: '创建成功',
type: 'success'
});
this.date="",
this.name="",
this.address="",
this.el_show=false;
},
//修改
//弹出框 显示
sets:function(val){
this.el_xiu=true;
console.log(val)
this.newtable={
date:val.date,
name:val.name,
address:val.address,
id:val.id
}
},
xg_err:function(){
this.el_xiu=false;
},
//保存修改
trueset:function(){
console.log(this.newtable.date+"===")
for(var i=0;i<this.tableData.length;i++){
if(this.tableData[i].id==this.newtable.id){
this.tableData[i].date=this.newtable.date;
this.tableData[i].name=this.newtable.name;
this.tableData[i].address=this.newtable.address;
this.tableData[i].id=this.newtable.id;
this.el_xiu=false;
}
}
this.searchtableData=this.tableData; //绑定搜索框初始数据
}
}
}
</script>
<style scoped>
</style>