美文网首页
vue 表格 一个可双击直接编辑的 table 表格

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

作者: sun_wenming | 来源:发表于2017-11-03 18:10 被阅读0次

参考于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)

相关文章

网友评论

      本文标题:vue 表格 一个可双击直接编辑的 table 表格

      本文链接:https://www.haomeiwen.com/subject/qdatmxtx.html