Javascript 使用vuejs处理可编辑文件

我有一张桌子，看起来像：

在这里，我可以定义我想要在我的表上有多少行和列，并且表可以根据我的需要进行更新，在这里一切都很好，我需要的下一步是更改每个单元格的内容并将其绑定到数组，我真的不知道如何实现这一点，似乎contenteditable与v-model之间存在一些问题

另一个问题是，我不知道如何将数据传递给我的数据对象，我应该将其作为矩阵传递吗？阵列？我需要知道特定行和列的每个输入，有什么帮助吗

以下是我到目前为止所做的：

<template>
  <div>
    <form class="form-horizontal">
      <h2 class="text-center"> Table </h2>
      <div class="form-group">
        <div class="col-md-1">
          <button @click="changeView('appTableStyle')" type="button" class="form-control btn btn-xs btn-warning">
            <span class="glyphicon glyphicon-pencil"></span>&nbsp;
          </button>
        </div>
        <label for="rows" class="control-label col-md-1">style:</label>
        <div class="col-md-6">
          <select class="form-control" v-model="table.tableStyle">
            <option v-for="(item,key) in tableStyles" :value="item.Id">
              {{ item.style }}
            </option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="rows" class="control-label col-md-2">rows:</label>
        <div class="col-md-2">
          <input type="number" min="1" v-model="table.rows" class="form-control" id="rows">
        </div>
        <label for="columns" class="control-label col-md-1">columns:</label>
        <div class="col-md-2">
          <input type="number" min="1" v-model="table.cols" class="form-control" id="cols">
        </div>
        <label for="columns" class="control-label col-md-2">How Many?:</label>
        <div class="col-md-2">
          <input type="number" min="1" v-model="insert" class="form-control" id="cols">
        </div>
      </div>
      <table class="table table-responsive" style="background-color:lightGray">
        <tbody>
          <tr v-for="(row,idx2) in tableRows">
            <td v-model="table.colsArr[idx]" :key="" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td>
          </tr>
        </tbody>
      </table>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-9">
          <div class="text-center">
            <button type="submit" @click.prevent="addTable" class="btn btn-success margin-above2 btn-block">Add Table</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>


<script>

export default {
  name: 'app',
  data () {
    return {
      table: {
        rows: 1,
        cols: 1,
        key: 'Table',
        tableStyle: 1,
        colsArr: []
      },
      insert: 1
    }
  },
  methods: {

    },
    changeView: function (view) {
      this.$store.commit('changeCurrentView', view)
    }
  },

  computed: {
    tableStyles () {
      return this.$store.getters.getTableStyles
    },
    tableRows () {
      return parseInt(this.table.rows)
    },
    tableCols () {
      return parseInt(this.table.cols)
    }
  }
}
</script>

桌子
风格：
{{item.style}}
排：
柱：
有多少？：
{{idx}}
添加表
导出默认值{
名称：“应用程序”，
数据（）{
返回{
表:{
行：1，
科尔斯：1，
键：'表'，
表类型：1，
colsArr:[]
},
插入：1
}
},
方法：{
},
changeView：功能（视图）{
此.$store.commit（'changeCurrentView'，view）
}
},
计算：{
表样式（）{
返回此项。$store.getters.getTableStyles
},
表行（）{
返回parseInt（this.table.rows）
},
表格（）{
返回parseInt（this.table.cols）
}
}
}