0

我正在使用 Element UI，有一个el-switch组件（如复选框），我不明白如何在其他组件中使用它（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>

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

我很困惑。只想在牢房里有一个开关，但不知道怎么做。

我将非常感谢任何帮助。

4

1 回答 1

2

您绑定到scope.row.check，但由于row.check不存在，Vue 无法识别它已更改。

但是，row.check 正在创建，并且调整窗口大小显然会触发重新渲染，迫使 Vue 查看scope.row.check. 这就是为什么你会看到这种情况发生。

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

这是一个工作小提琴。

于 2017-09-01T17:54:12.157 回答