vue+element ui实现表格全选功能

61 阅读1分钟

<el-row style="margin-top: 30px">
  <el-table ref="caseTable" :data="case_info.get_show_data(false)"
            @sort-change="sortChange" style="width: 100%;margin: auto" border
            :header-cell-style="{background:'#e2e4e9',color:'#606266'}"
            :row-key="(row)=>{return row.id}">
    <el-table-column prop="case" label="用例名称" width="500" align="center"></el-table-column>
    <el-table-column prop="failed_reason" label="失败原因" width="900" align="center"></el-table-column>
    <el-table-column :reserve-selection="true" width="80" align="center">
      <template slot="header">
        <el-checkbox v-model="checkedVal" @change="selectAll"></el-checkbox>
      </template>
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.is_linked"
                     @change="changeLinkedStates({ id: scope.row.id}, { is_linked: scope.row.is_linked })"></el-checkbox>
      </template>
    </el-table-column>

  </el-table>
</el-row>


selectAll (val) {
  this.case_info.get_show_data(false).forEach(row => {
    row.is_linked = val
    this.changeLinkedStates({id: row.id}, {is_linked: row.is_linked})
  })
}

changeLinkedStates (row, newData) {
  this.$axios({
    url: this.get_url('/modify/linkedStates'),
    method: 'post',
    data: {
      old: row,
      new: newData
    }
  })
},