将父组件的数据传输到子组件的正确方法(Element UI，Vue.js)？

Question

我正在使用element ui，有一个 el-switch组件（如复选框），我不明白我如何在 insem 中使用它>（el-table-> el-column-> el-switch）。

这是代码：

var Main = {
  data() {
    return {
      tableData: [
        {
          category: 'Ticket',
          panelNotification: {
            check: true,
            name: 'category1'
          },
          slackNotification: {
            check: true,
            name: 'panel1'
          },
          button: {
            name: 'slack1',
            value: 'slackValue1'
          }
        }, {
          category: 'Self ticket',
          panelNotification: {
            check: false,
            name: 'category2'
          },
          slackNotification: {
            check: true,
            name: 'panel2'
          },
          button: {
            name: 'slack2',
            value: 'slackValue2'
          }
        }, {
          category: 'Important ticket',
          panelNotification: {
            check: true,
            name: 'category3'
          },
          slackNotification: {
            check: true,
            name: 'panel3'
          },
          button: {
            name: 'slack3',
            value: 'slackValue3'
          }
        }
      ]
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@1.4.3/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.3/lib/index.js"></script>
<div id="app">
  <el-table :data="tableData">
    <el-table-column
      prop="category"
      label="category"
      width="180">
    </el-table-column>
    <el-table-column
      prop="panelNotification"
      label="panel notification"
      width="200">
      <template scope="scope">
        <el-switch
          v-model="scope.row.check"
          on-color="#13ce66"
          off-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="slackNotification"
      label="slack notification"
      width="200">
      <template scope="scope">
        <el-switch
          v-model="scope.row.check"
          on-color="#13ce66"
          off-color="#ff4949"
          >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="button"
      width="120">
      <template scope="scope">
        <el-button>Save</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

现在问题是单击开关不起作用，直到您调整窗口大小（怪异💩）。由于某种原因，单击在行中切换两个开关。

我很困惑。只想在单元格中有一个开关，但无法理解如何做。

我将非常感谢任何帮助。

Answer 1

您已绑定到scope.row.check，但是由于row.check不存在，Vue不认识到它更改了。

但是， row.check 是获得创建的，调整窗口的大小显然是在触发重新渲染，迫使VUE查看scope.row.check。这就是为什么您看到这种情况的原因。

您需要分别绑定到scope.row.panelNotification.check和scope.row.slackNotification.check。

这是一个工作小提琴。