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

<!--增删改查-->
  <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 = Object.assign({}, 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({
    }),
  },
};

这样就可以实现增删改的功能了
希望能够帮助你(๑╹◡╹)ﾉ"“”
٩(๑❛ᴗ❛๑)۶ヾ(✿ﾟ▽ﾟ)ノ

还有一篇新文章写的是基于el-table封装的表格有兴趣可以看一下

element-ui table组件化