当后台删除数据后 怎么刷新表格

[ruanzy]

// 自定义列组件
Vue.component('table-operation', {
  template: `<span>
    <a href="" @click.stop.prevent="update(rowData,index)">编辑</a>&nbsp;
    <a href="" @click.stop.prevent="deleteRow(rowData,index)">删除</a>
    </span>`,
  props: {
    rowData: {
      type: Object
    },
    field: {
      type: String
    },
    index: {
      type: Number
    }
  },
  methods: {
    update () {
      var rowData = this.rowData;
      var $Modal = this.$Modal;
      var options = {
        show: true,
        heigt: 500,
        width: 450,
        title: '编辑',
        component: {
          name: 'edittr',
          data: rowData
        },
        buttons: [
          {
            text: '确定',
            action: function(){

              alert(rowData.name);
            }
          },
          {
            text: '取消',
            action: function(){
              $Modal.close(d)
            }
          }
        ]
      }
      var d = $Modal.dialog(options)
    },
    deleteRow () {
      var rowData = this.rowData;
      this.$Modal.confirm('确定要删除数据吗?', function(v){
        if(v){
          alert(rowData.name)
          //后台删除数据
          //这里怎么获得table对象来操作
        }
      })
    }
  }
})

这里的deleteRow 方法, 后台删除数据后，怎么刷新表格？

[huangshuwei]

表格的渲染是响应式的，只要表格的‘源数据’变化，表格将会重新渲染。 两种方案： 方案1、后台删除表格某一行数据后，将其余的表格数据返回到客户端，表格数据重新赋值，表格自动重新渲染 方案2、后台删除表格某一行数据后，只返回客户端成功或者失败的状态，拿到成功状态后将你要删除的那行数据从表格数据对象中删除，表格自动重新渲染

[ruanzy]

表格的渲染是响应式的，只要表格的‘源数据’变化，表格将会重新渲染。 这个我知道 我个人觉得，刷新表格比较好

1. 方案1肯定不行，方案2只返回客户端成功或者失败的状态 2.但是方案2--将你要删除的那行数据从表格数据对象中删除，表格自动重新渲染 这个难道我去遍历表格数据？根据ID什么的去删掉它。这个肯定不行 如果有100表数据或更多呢

而且你只删除了那条数据 ，后台要是有人有增加了一条数据，你的表格数据是最新的？ 肯定不行，只能再请求一次

created () { const that = this; that.getTableData(); },

我觉得如果能够获得table组件对象最好操作

[ruanzy]

还有一个问题 这个Vue.component('table-operation', { template:... 由于是全局注册的 会存在命名空间污染问题 有同名的就有问题

[huangshuwei]

我觉得如果能够获得table组件对象最好操作

这个设计当初是为了考虑到使用 vuex 的情况，因为如果使用了vuex 即使拿到table对象直接操作也是不被允许的。如果不用vuex,的确是不太方便。后面优化下

[huangshuwei]

还有一个问题 这个Vue.component('table-operation', { template:... 由于是全局注册的 会存在命名空间污染问题 有同名的就有问题

是的，这种方式组件名称不要重复，否则会有问题。后面用另一种方式实现

[huangshuwei]

已实现，已发布，安装最新版本即可 https://github.com/huangshuwei/vue-easytable/releases/tag/1.5.4

实例参考： http://doc.huangsw.com/vue-easytable/app.html#/table?anchor=table-custom-columns