点击按钮即可在Vue表格中切换选择更改

时间:2020-03-19 06:34:51

标签: javascript vuejs2 vue-component

我在Vue组件中有一个el-table(元素),其中有一个选择列。您可以选中复选框以选择多个项目。我需要具有选择附加到表中元素的复选框的功能。

<el-table
  :data="unit_list"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" />

  <el-table-column prop="name" label="Name" >
    <template slot-scope="scope" >
      <span @click="toggleRow(scope.row)" class="click_cell">
       {{ scope.row.name }}
      </span>
    </template>
  </el-table-column>      

  <el-table-column>
    <template slot-scope="scope">
      <div class="no_click_cell">
        You can't click this
      </div>
    </template>
  </el-table-column>

...script

handleSelectionChange(val) {
  this.$emit('selecttionChange', val) // this sends the resulting list to the parent component
}

关于如何从toggleRow访问选择更改的文档尚不清楚

1 个答案:

答案 0 :(得分:0)

方法如下:

//...methods
toggleRow(row){
  this.$refs.unitListTable.toggleRowSelection(row)
}

其中unitListTable是您的表引用

<el-table
  ref="unitListTable"
  :data="checkSearch(unit_list)"
  @selection-change="handleSelectionChange"
>