element-ui与Vue的使用：创建一个table表格的增删改。

最新推荐文章于 2023-05-25 16:06:43 发布

爱发呆的程序员

最新推荐文章于 2023-05-25 16:06:43 发布

阅读量1.2k

点赞数 4

文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/tinglis/article/details/106574214

版权

element-ui与Vue的使用：创建一个table表格的增删改。

这几天都在学习element，现在把我学习到的东西分享给大家：

首先介绍一下element，这是一款专门给前端程序员设计的，而layui可以说是专门给后端程序员设计的。
其次就是关于element的使用，这其实很简单，只要把自己想要的东西拷贝进来就可以了，直接用上。

一、我刚刚开始学习的时候，就被弹框困扰了，我一直以为在js里面写弹框，后来才发现并不是，我们可以用v-if或者v-show来控制弹框的显示，我承认我太年轻了，那我们先上弹框的代码

首先我们先定义一个变量来控制弹框，记住要定义在data里面，先设置为false；

   dialogVisible: false,

然后我们在用按钮去改变他的值，就像这样：

 <el-button type="primary" @click.native="dialogVisible=!dialogVisible">新增</el-button>

这样我们点击一次就把dialogVisible的值变成true，再点击一次又变成false了；
然后我们就用dialogVisible去控制弹框的显示，如下：

// An highlighted block
 <el-dialog title="新增" :visible.sync="dialogVisible" width="33.6%" :before-close="handleClose">
      <el-form label-position='left' :inline="true" :model="editObj" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="editObj.name"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model.number="editObj.id"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-position='left' ref="form" :model="editObj" label-width="40px">
        <el-form-item label="说明" prop="desc">
          <el-input type="textarea" v-model="editObj.instructions"></el-input>
        </el-form-item>
        <el-form-item label="示例" prop="desc">
          <el-input type="textarea" v-model="editObj.case"></el-input>
        </el-form-item>
      </el-form>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">保 存</el-button>
      </span>
    </el-dialog>

这样就可以显示弹框啦，对了直接复制代码会报错哦，我们要定义一下我们的函数，还有data的值哦！！！
上方我们要在data定义一下editObj；

 editObj: {
          id: '',
          name: '',
          instructions: '',
          case: '',
        },

这样定义就好啦。
一定会有人问为什么弹框上面的×点击为什么弹框没有反应呢？
这是因为我们还没有写方法呀！我们后面会说的，和修改数据弹框一起说！
然后我们就来新增数据啦，把弹框的form表单存到我们的数据中，当然，我们在上传的时候，要检验一下表单是否为空对吧！我这边只检测了第一项、第二项、第三项并且还加一个，就是检验id是否为数字，我是这样写的，

 add() {//增加数据
          if (!this.editObj.name) {
            this.$message({
              message: '请输入姓名',
              type: 'warning'
            });
            return;
          }
          if (!this.editObj.id) {
            this.$message({
              message: '请输入编码',
              type: 'warning'
            });
            return;
          }
          if (/[^\d]/g.test(this.editObj.id)) {
            this.$message({
              message: '编码只能为数字，请输入正确的编码',
              type: 'warning'
            });
            return;
          }
          if (!this.editObj.instructions) {
            this.$message({
              message: '请输入说明',
              type: 'warning'
            });
            return;
          }
          var car = { id: this.editObj.id, name: this.editObj.name, instructions: this.editObj.instructions, case: this.editObj.case }
          this.$confirm('确认是否要新增？')
            .then(_ => {
              this.list.push(car)
              this.editObj = {
                id: '',
                name: '',
                instructions: '',
                case: '',
              }
              this.dialogVisible = !this.dialogVisible

            })
            .catch(_ => { });

        },

接下来我们就讲修改数据和删除数据啦！
一样的，首先我们先要用一个变量控制弹框是否出现！
也是在data里面哦；

changeObj: false,

再次我们也要写个按钮控制这个变量的变化，这笔我写了2个，因为我这边的删除键和修改是在每一个数组对象的后面，我点击了修改后才会出现在每一个数组后面

 <el-button type="primary" @click.native="changeObj = !changeObj">修改</el-button>
 <el-button type="primary" @click.native="this.seen = !this.seen">删除</elbutton>

<el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="id" label="编码" width="180">
      </el-table-column>
      <el-table-column prop="instructions" label="说明">
      </el-table-column>
      <el-table-column prop="case" label="示例">
      </el-table-column>
      <!-- <el-table-column v-model="id" v-if="seen" label="操作"><a v-model="id" href=""
          @click.prevent="del(scope.$index, tableData)">删除</a>
      </el-table-column> -->
      </el-table-column>
      <!-- 修改按钮是否显示 -->
      <el-table-column v-if="changeObj" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="editUser(scope.row,scope.$index)" type="text" size="small">
            修改
          </el-button>
        </template>
      </el-table-column>
      <!-- 删除按钮是否显示 -->
      <el-table-column v-if="seen" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, list)" type="text" size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

再来就是弹框了

<el-dialog title="修改" :visible.sync="changeObj1" width="32.6%" :before-close="handleClose">
      <el-form label-position='left' :inline="true" :model="editObj" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="editObj1.name"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input :disabled="true" v-model="editObj1.id"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form" label-position='left' :model="editObj" label-width="40px">
        <el-form-item label="说明" prop="desc">
          <el-input type="textarea" v-model="editObj1.instructions"></el-input>
        </el-form-item>
        <el-form-item label="示例" prop="desc">
          <el-input type="textarea" v-model="editObj1.case"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeObj1 = false">取 消</el-button>
        <el-button type="primary" @click="change">保 存</el-button>
      </span>
    </el-dialog>

和上面新增一样我们也是要定义方法和data里面的值的！
下面我们说一下方法：


        deleteRow(index, rows) {//数据删除
          this.$confirm('确认是否要删除？')
            .then(_ => {
              rows.splice(index, 1);
            })
            .catch(_ => { });
        },
        editUser(item, idx) {//修改数据的数据显示
          this.changeObj1 = true;
          this.suerIndex = idx;
          this.editObj1 = {
            id: item.id,
            name: item.name,
            instructions: item.instructions,
            case: item.case,
          }
        },
        change() {//数据修改
          if (!this.editObj1.name) {
            this.$message({
              message: '请输入姓名',
              type: 'warning'
            });
            return;
          }
          if (!this.editObj1.instructions) {
            this.$message({
              message: '请输入说明',
              type: 'warning'
            });
            return;
          }
          this.$confirm('确认是否要修改？')
            .then(_ => {
              Vue.set(this.list, this.suerIndex, this.editObj1)
              this.changeObj1 = false
            })
            .catch(_ => {

            });
        },

我们删除数据就是直接删除，修改的话，我们就像让数据先显示弹框中，而且我们的编码，就是id不能够修改！修改后我们还要判断一下是否为空，和上面新增是一样的形式！
这边还有一个就是弹窗点×关闭：
这个方法很简单，直接这样定义就好了：

   handleClose() {//弹框关闭
          this.dialogVisible = false;
          this.changeObj1 = false
        },

二、table表格的分页!

首先我们先去官网找一个分页，拷贝进来，再把数据改一下

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
      :total="list.length">
    </el-pagination>

total是数据的条数，我们直接改成我们数组的长度就行了
方法也有给我们:

 handleSizeChange(val) { //每页条数
          console.log(`每页 ${val} 条`);
          this.pagesize = val;
        },
        handleCurrentChange(val) { //跳转页码
          console.log(`当前页: ${val}`);
          this.currpage = val;
        },

当然这边我改了一下，这样可以绑定我的对象数组！
当然我们的循环也要改变一下了，毕竟我们也是有分页的人了；
改成这样：

<el-table :data="list.slice((currpage - 1)*pagesize, currpage * pagesize)" style="width: 100%">
      <!-- <el-table :data="list" style="width: 100%"> -->
      <el-table-column prop="name" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="id" label="编码" width="180">
      </el-table-column>
      <el-table-column prop="instructions" label="说明">
      </el-table-column>
      <el-table-column prop="case" label="示例">
      </el-table-column>
      <!-- <el-table-column v-model="id" v-if="seen" label="操作"><a v-model="id" href=""
          @click.prevent="del(scope.$index, tableData)">删除</a>
      </el-table-column> -->
      </el-table-column>
      <!-- 修改按钮是否显示 -->
      <el-table-column v-if="changeObj" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="editUser(scope.row,scope.$index)" type="text" size="small">
            修改
          </el-button>
        </template>
      </el-table-column>
      <!-- 删除按钮是否显示 -->
      <el-table-column v-if="seen" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, list)" type="text" size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

我这样写完之后我发现了一个问题！
就是说我改第二页的第二个数据变成了改第一页第二个数据了，这说明什么问题！这说明分完页之后，每一页的index都只会认得0-9，所以我们还要改进一下修改和删除的方法：

 deleteRow(index, rows) {//数据删除
          this.$confirm('确认是否要删除？')
            .then(_ => {
              rows.splice(index + ((this.currpage - 1) * this.pagesize), 1);
            })
            .catch(_ => { });
        },
        editUser(item, idx) {//修改数据的数据显示
          this.changeObj1 = true;
          this.suerIndex = idx + ((this.currpage - 1) * this.pagesize);
          this.editObj1 = {
            id: item.id,
            name: item.name,
            instructions: item.instructions,
            case: item.case,
          }
        },
        change() {//数据修改
          if (!this.editObj1.name) {
            this.$message({
              message: '请输入姓名',
              type: 'warning'
            });
            return;
          }
          if (!this.editObj1.instructions) {
            this.$message({
              message: '请输入说明',
              type: 'warning'
            });
            return;
          }
          this.$confirm('确认是否要修改？')
            .then(_ => {
              Vue.set(this.list, this.suerIndex, this.editObj1)
              this.changeObj1 = false
            })
            .catch(_ => {

            });
        },

这样就完成了，最后我也附上我的data数据：

 data: {
        seen: false, //删除按钮是否显示
        dialogVisible: false, //新增弹框是否显示
        changeObj: false, //修改按钮显示
        changeObj1: false, //修改弹窗显示
        suerIndex: 0, //修改数据的（index）
        currentPage: 1, //数据初始默认跳转页面
        pagesize: 10, //默认每页条数
        currpage: 1, //默认页码
        list: [ //模拟数据
          { id: 1, name: '宝马', instructions: '这是一个说明1', case: '这是案例1' },
          { id: 2, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
          { id: 3, name: '宝马', instructions: '这是一个说明1', case: '这是案例1' },
          { id: 4, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
          { id: 5, name: '宝马', instructions: '这是一个说明1', case: '这是案例1' },
          { id: 6, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
          { id: 7, name: '宝马', instructions: '这是一个说明1', case: '这是案例1' },
          { id: 8, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
          { id: 9, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
          { id: 10, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
          { id: 11, name: '法拉利', instructions: '这是一个说明2', case: '这是案例2' },
        ],
        editObj: {
          id: '',
          name: '',
          instructions: '',
          case: '',
        },
        editObj1: {
          id: '',
          name: '',
          instructions: '',
          case: '',
        }
      },

随便写的，不要喷我只写车！！！
到这里就做完啦！
感谢观看！有什么不对的地方欢迎指正！

爱发呆的程序员

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
element-ui与Vue的使用：创建一个table表格的增删改。

element-ui与Vue的使用：创建一个tebal表格的增删改。这几天都在学习element，现在把我学习到的东西分享给大家：首先介绍一下element，这是一款专门给前端程序员设计的，而layui可以说是专门给后端程序员设计的。其次就是关于element的使用，这其实很简单，只要把自己想要的东西拷贝进来就可以了，直接用上。一、我刚刚开始学习的时候，就被弹框困扰了，我一直以为在js里面写弹框，后来才发现并不是，我们可以用v-if或者v-show来控制弹框的显示，我承认我太年轻了，那我们先上弹框的
复制链接

扫一扫