vue+elenent-ui+vuex实现增删改功能
这是一个简单的增加、删除、修改功能的表格
新人报道 如果那里写的不对请见谅( • ̀ω•́ )✧
效果图：
增加功能：
编辑功能：
删除功能：
安装vue和vuex的过程我就不写啦 大家肯定都会 如果不会的去官网查一下【vue官网】
下面我要开始啦(〃'▽'〃)
1、安装element-ui **npm i element-ui -S**
2、在min.js中引入css和组件库 这里我全部引入了 也可按需引入
（1）import 'element-ui/lib/theme-chalk/index.css'
（2）import ElementUI from 'element-ui';
（3）Vue.use(ElementUI);
3、新建一个页面代码如下：
<!--增删改查-->
<div>
<div style="font-size: 30px;color: salmon">表格案例</div>
<!--按钮、表格-->
<el-card class="box-card">
<el-button type="success" size="small" @click="add">增加</el-button>
<el-table :data="tableData" stripe>
<el-table-column prop="date" label="日期" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center">
</el-table-column>
<el-table-column label="操作" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="remove(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!--弹窗-->
<el-dialog :title="dialogTitle" width="50%" :visible.sync="iconFormVisible">
<el-form :inline="true" :model="userInfo" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="userInfo.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="日期">
<el-input v-model="userInfo.date" placeholder="日期"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="userInfo.address" placeholder="地址"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="userInfo.age" placeholder="年龄"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="iconFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitUser()">确 定</el-button>
</div>
</el-dialog>
</div>
表格和弹框写好后我开始写js和一些用到的方法
（这里表格数据用到了vuex,如果不需要用vuexr的可以往下看）
export default {
name: "test",
data() {
return {
iconFormVisible: false,
userInfo: {},
dialogTitle: '增加',
rowIndex: null,
};
},
created() {
this.setTable();
},
methods: {
...mapActions([
'setTable',
]),
// 增加
add() {
this.dialogTitle = '增加';
this.userInfo = {};
this.iconFormVisible = true;
},
// 编辑
handleEdit(index, row) {
this.dialogTitle = '编辑';
this.userInfo = row;
this.iconFormVisible = true;
this.rowIndex = index;
},
// 弹窗确定
submitUser() {
if (this.dialogTitle === '编辑') {
this.tableData.splice(this.rowIndex, 1, this.userInfo);
this.iconFormVisible = false;
return;
}
this.tableData.splice(0, 0, this.userInfo);
this.iconFormVisible = false;
},
// 删除
remove(index, row) {
this.$confirm(`确定删除${row.name}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error',
}).then(() => {
this.tableData.splice(index, 1);
});
},
},
computed: {
...mapGetters({
tableData: 'gettableData',
}),
},
};
代码中tableData数据格式如下
const tableData = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
age: '12',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
age: '45',
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
age: '33',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
age: '7',
}];
表格的数据也可以直接写到data()中代码如下：
export default {
name: "test",
data() {
return {
iconFormVisible: false,
userInfo: {},
dialogTitle: '增加',
rowIndex: null,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
age: '12',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
age: '45',
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
age: '33',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
age: '7',
}],
};
},
created() {
},
methods: {
...mapActions([
]),
// 增加
add() {
this.dialogTitle = '增加';
this.userInfo = {};
this.iconFormVisible = true;
},
// 编辑
handleEdit(index, row) {
this.dialogTitle = '编辑';
this.userInfo = row;
this.iconFormVisible = true;
this.rowIndex = index;
},
// 弹窗确定
submitUser() {
if (this.dialogTitle === '编辑') {
this.tableData.splice(this.rowIndex, 1, this.userInfo);
this.iconFormVisible = false;
return;
}
this.tableData.splice(0, 0, this.userInfo);
this.iconFormVisible = false;
},
// 删除
remove(index, row) {
this.$confirm(`确定删除${row.name}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error',
}).then(() => {
this.tableData.splice(index, 1);
});
},
},
computed: {
...mapGetters({
}),
},
};
这样就可以实现增删改的功能了
希望能够帮助你(๑╹◡╹)ﾉ"""
٩(๑❛ᴗ❛๑)۶ヾ(✿ﾟ▽ﾟ)ノ
网友评论