vue+elenent-ui+vuex實(shí)現(xiàn)增刪改功能
這是一個(gè)簡(jiǎn)單的增加叉橱、刪除窃祝、修改功能的表格
新人報(bào)道 如果那里寫的不對(duì)請(qǐng)見(jiàn)諒( ? ?ω?? )?
效果圖：
增加功能：
編輯功能：
刪除功能：
安裝vue和vuex的過(guò)程我就不寫啦 大家肯定都會(huì)? 如果不會(huì)的去官網(wǎng)查一下【vue官網(wǎng)】
下面我要開始啦(〃'▽'〃)
1、安裝element-ui? ? **npm i element-ui -S**
2糕再、在min.js中引入css和組件庫(kù)?這里我全部引入了 也可按需引入
（1）import 'element-ui/lib/theme-chalk/index.css'
（2）import ElementUI from 'element-ui';
（3）Vue.use(ElementUI);
3、新建一個(gè)頁(yè)面代碼如下：
<!--增刪改查-->
? <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>
表格和彈框?qū)懞煤笪议_始寫js和一些用到的方法
（這里表格數(shù)據(jù)用到了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數(shù)據(jù)格式如下
? ? const tableData = [{
? ? ? date: '2016-05-02',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄',
? ? ? age: '12',
? ? }, {
? ? ? date: '2016-05-04',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄',
? ? ? age: '45',
? ? }, {
? ? ? date: '2016-05-01',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄',
? ? ? age: '33',
? ? }, {
? ? ? date: '2016-05-03',
? ? ? name: '王小虎',
? ? ? address: '上海市普陀區(qū)金沙江路 1516 弄',
? ? ? age: '7',
? ? }];
表格的數(shù)據(jù)也可以直接寫到data()中代碼如下：
export default {
? name: "test",
? data() {
? ? ? return {
? ? ? ? iconFormVisible: false,
? ? ? ? userInfo: {},
? ? ? ? dialogTitle: '增加',
? ? ? ? rowIndex: null,
? ? ? ? tableData: [{
? ? ? ? ? date: '2016-05-02',
? ? ? ? ? name: '王小虎',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄',
? ? ? ? ? age: '12',
? ? ? ? }, {
? ? ? ? ? date: '2016-05-04',
? ? ? ? ? name: '王小虎',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄',
? ? ? ? ? age: '45',
? ? ? ? }, {
? ? ? ? ? date: '2016-05-01',
? ? ? ? ? name: '王小虎',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄',
? ? ? ? ? age: '33',
? ? ? ? }, {
? ? ? ? ? date: '2016-05-03',
? ? ? ? ? name: '王小虎',
? ? ? ? ? address: '上海市普陀區(qū)金沙江路 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({
? ? }),
? },
};
這樣就可以實(shí)現(xiàn)增刪改的功能了
希望能夠幫助你(????)?"""
?(?????)?ヾ(??▽?)ノ
