2

tl;dr : 下の図のような編集可能なセルを含むテーブルを生成しています。私はそれを持っているので、セルは編集可能で全体が更新されますが、実際に新しい行と列を追加するために必要なプロセスを理解するのに苦労しています.

ここに画像の説明を入力

合計を除くすべてのセルはエンド ユーザーが編集できます。たとえば、セル [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 つの主要な異なるコンポーネント タイプがあります。

  • datainput (一般的な入力セル)
  • dataheader (datainput を拡張)
  • datacell (datainput を拡張)
  • baserow (表の行)
  • headerrow (baserow を拡張し、データヘッダーで構成)
  • datarow (baserow を拡張し、データセルで構成)

行とセルをそのまま追加します

ベースロー

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>列プロップに追加されていることがわかりますが、UI には実際には何も生成されません。これは、最初に行と列をどのようにレンダリングしたかの結果であり、ある種の基本的な誤解があるだけだと思います...何がどこで間違っているかについて、誰かが方向性を提供できますか?

ここに画像の説明を入力

4

2 に答える 2

1

根本的な誤解でした。これを達成するには、データを props と組み合わせて使用​​する必要があります。最初に値を prop としてアタッチし、次に prop をデータ値に割り当てる必要があります。次の例は、私がやろうとしていたことを強調しています。

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以外のものを使用することはできません<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 に答える