以前は、テーブルの追加、削除、変更、クエリを vue で実装していましたが、スタイルがなくて見苦しいものでしたが、今回は elementUI フレームワークを使用してこの機能を実装しました。インターフェースのスタイルは最適化されました。必要に応じて、コードを直接コピーして実行します elementUI をグローバルにインストールし、修正後に再度追加することが前提です 検索機能の検索内容が存在しない場合、または検索情報エラーリストが変更されない場合（通常はリストが空のはずです） ) バックグラウンド データがないため、これはフロントエンド関数の単なるバグです。上司が許してくれるといいのですが (スプレーしないでください)、主にロジックを見てください。
<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>