vue和java实现页面增删改_【教程】vue加element -ui实现表格增删改功能

vue+elenent-ui+vuex实现增删改功能

这是一个简单的增加、删除、修改功能的表格

新人报道 如果那里写的不对请见谅( • ̀ω•́ )✧

效果图：

增加功能：

编辑功能：

删除功能：

安装vue和vuex的过程我就不写啦 大家肯定都会 如果不会的去官网查一下vue.js官网

下面我要开始啦(〃'▽'〃)

element-ui 官方地址

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、新建一个页面代码如下：

表格案例

增加

编辑

删除

取 消

确 定

表格和弹框写好后我开始写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({

}),

},

};

这样就可以实现增删改的功能了

希望能够帮助你(๑╹◡╹)ﾉ"""

٩(๑❛ᴗ❛๑)۶ヾ(✿ﾟ▽ﾟ)ノ