vue 表格 一个可双击直接编辑的 table 表格

参考于jinzhe的vue-editable

由于下载下来报了一系列BUG,修改内容 我提的一个Issues-5
由于刚入坑Vue二天。依靠朋友帮助下修改之后成功使用的。

主要部分代码

在template中 引入
<template>
  <div>
    <table>
      <tr v-for="user in data">
        <td class="text center" v-text="user.name" @dblclick="editable($event,'name',user)"></td>
        <td class="text center" v-text="user.name" @dblclick="editable($event,'name',user)"></td>
      </tr>
    </table>
  </div>
</template>
---------------
在 script 中 使用
<script>
  export default {
    name: 'myTable',
    data: function () {
      return {
        data: [
          {name: '123'},
          {name: '4451'}
        ]
      }
    },
    methods: {
//            e     :事件
//            field :字段,用于告诉服务端要更新哪个字段
//            user  :列表中某一行数
      editable: function (e, field, user) {
        let that = this
        that.$editable(e, function (value) {
        })
      }
    }
  }
</script>

主要代码:

import VueEditable from '@/plugins/vueEditable'
Vue.use(VueEditable)

推荐阅读更多精彩内容