vue-admin-template + element-ui 改造table组件实现二次封装简化调用(三)：组件调用操作表格数据--删除table表格数据

最新推荐文章于 2023-03-21 08:57:01 发布

原创最新推荐文章于 2023-03-21 08:57:01 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在使用自定义Name插件时，实现在点击删除按钮后，通过修改tabledata数据驱动表格实时更新。作者展示了利用Vue访问父组件实例的方法，实现了与Element UI表格的交互并确保了数据同步删除。

前面讲到到用自己封装的方法来实现table表格组件

 tableHead: [
        { field: 'date', label: 'date' },
        { field: 'name', label: 'name', component: Name },//传入 Name组件渲染
        { field: 'address', label: 'address' }
      ]

这里的name就是我们自定议的插件，那么如果这个插件是个按钮，比如下面这样，那么在组件里操作了删除，我们肯定想让table也同步删除，查了element-ui的文档，文档里没有提供接口，那么我们就来自己实现好了，我这里的思路是直接修改tabledata的数据，然后表格会自动渲染，并且也成功了，说明我的思路还是正确的，代码如下

<template>
  <el-button :row="row" type="warning" @click="delete">删除</el-button>
</template>
<script>
import { delete } from '@/api/my/delete'
export default {
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    open() {
      this.$prompt('请输入操作理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '请输入操作理由'
      }).then(({ value }) => {
        delete ({ id:id }).then(response => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          //这里直接使用vue的访问父组件实例的方法的操作
          // 文档地址 https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E7%88%B6%E7%BA%A7%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B
          // 循环找到对应的数据进行删除
          for (let index = 0; index < this.$parent.$parent.$parent.tabledata.list.length; index++) {
          //因为这里在table中有两层，所以总共是有三个parent,直接修改的最原始的数据
            const element = this.$parent.$parent.$parent.tabledata.list[index]
           //这里是按id值来查找数据的
           //暂时没有能拿到行的下标
            if (element.id === this.row.id) {
              this.$parent.$parent.$parent.tabledata.list.splice(index, 1)
            }
          }
        }).catch(error => {
          this.$message({
            type: 'fail',
            message: error
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>