2

tl;博士：我正在生成一个包含可编辑单元格的表格，类似于下图。我有它，所以单元格是可编辑的并且总更新，但我正在努力找出我需要遵循的过程来实际添加新的行和列。

在此处输入图像描述

最终用户可以编辑除总计之外的所有单元格，例如单元格 [ex1][item1] 可以从 100 更改为 150，然后会引发一个事件，将该行的总计从 320 更新为 370 .

最初我在 HTML 文件中定义主模板...

<div class="container" id="app">

    <script type="text/x-template" id="datagrid-template">
        <table class="table-striped">
            <thead>
                <headerrow v-bind:columns="columns"></headerrow>
            </thead>

            <tbody>
            <datarow v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></datarow>
            </tbody>
        </table>
    </script>

    <div class="row">
        <div class="col-sm-10">
            <datagrid v-bind:columns="columns" v-bind:data="rows"></datagrid>
        </div>
        <div class="col-sm-2">
            <div class="row">
                <button type="button" v-on:click="addColumn()">Add Column</button>
            </div>
            <div class="row">
                <button type="button" v-on:click="addRow()">Add Row</button>
            </div>
        </div>
    </div>
</div>

在 JS 文件中，我初始化了主要的 Vue 元素......

var app = new Vue({
  el: "#app",
  data: {
    categories: [...],
    companies: [...]
  },
  methods: {
    addRow: function() {
      console.log(this.$children[0]);
    },
    addColumn: function() {
      this.$children[0].columns.push({value: 'test'});
    }
  }
});

然后我有 6 种主要的不同组件类型：

  • 数据输入（通用输入单元）
  • 数据头（扩展数据输入）
  • 数据单元（扩展数据输入）
  • baserow（表格中的行）
  • headerrow（扩展baserow，由dataheaders组成）
  • datarow（扩展baserow，由datacells组成）

我这样添加一行和单元格

基行

var baseRow = {
  render: function(createElement) {
    return createElement('tr', {}, this.getProps(createElement));
  },
  props: {...}
  }
};

标题行

Vue.component('headerrow', {
  mixins: [baseRow],
  methods: {
    getProps: function(createElement) {
      var comps = [];
      this.$options.propsData.columns.forEach(function(el) {
        comps.push(createElement('dataheader', {
          props: {...}
        }));
      });
      return comps;
    }
  }
});

<datagrid>当我单击添加列时，我可以在查看使用 chrome 扩展程序时看到“测试”被添加到列道具中。此外，我看到“测试”被添加到了<headerrow>columns 属性中，但 UI 中没有任何实际生成。我假设这是我最初如何渲染行和列的结果，并且我只是有某种基本的误解......谁能提供一些关于我出错的地方和地方的方向？

在此处输入图像描述

4

2 回答 2

1

所以这是一个根本性的误解。要做到这一点，数据必须与道具一起使用。最初，这些值必须作为道具附加，然后应该将道具分配给数据值。以下示例突出显示了我正在尝试做的事情。

var baseRow = {
  render: function(createElement) {
    return createElement('tr', this.createCells(createElement));
  },
  props: {
    initColumns: {
      type: Array,
      default: []
    },
    initData: {
      type: Object,
      default: null
    }
  },
  data: function() {
    return {
      columns: this.initColumns,
      data: this.initData
    }
  }
};

然后添加一个元素，从主 Vue 对象（包含行组件）中，您可以调用类似于this.columns.push({value: 'test'});. 这将更新列数据属性，还将更新 UI。

据我了解，这是 props 具有单向数据流的结果，而 data 属性是反应性的，这在文档的本节中被取消。

于 2016-11-16T17:36:55.837 回答
-1

你不能<tr>在 a 中使用除 a 以外的任何东西<tbody>。您可以使用 Vue 指令is在其中添加其他组件：

<tbody>
    <tr is="datarow" v-for="row in rows" v-bind:columns="columns" v-bind:data="row"></tr>
</tbody>
于 2016-11-15T22:30:50.763 回答