美文网首页
vue批量操作

vue批量操作

作者: 双耳云 | 来源:发表于2019-07-05 17:18 被阅读0次

1.html

<div>
   <el-button type="warning" @click.native="delGroup" :disabled="this.sels.length === 0">批量删除</el-button><!--disabled值动态显示,默认为true,当选中复选框后值为false-->
  </div>
  <el-table :data.sync="tableData" border height="520" size="small" class="table"
          ref="multipleTable"
          style="width:100%"
          @sort-change="getSortChange"
          @selection-change="handleSelectionChange">
  <el-table-column type="selection" :reserve-selection="true"  width="55"></el-table-column>
  <el-table-column prop="code" label="编号" v-if="show_code"></el-table-column>
  <el-table-column prop="title" label="广告名称" v-if="show_title"></el-table-column>
  <el-table-column label="操作" width="240" align="center">
    <template slot-scope="scope">
      <el-button  @click="handleEdit(scope.$index, scope.row)" style="padding:0" size="small">
        <a href="javascript:;" title="修改"><img src="../../assets/images/update.png" alt="" ></a>
      </el-button>
      <el-button  @click="handleDelete(scope.$index, scope.row)" style="padding:0" size="small">
        <a href="javascript:;" title="删除">
          <img src="../../assets/images/delete.png" alt="">
        </a>
      </el-button>
    </template>
  </el-table-column>
</el-table>
</div>

2.js

<script> 
export default { 
 name: 'product', 
 mounted() { 
  this.onSearch() 
 }, 
 data() { 
  return { 
   sels: [],//选中的值显示 
   tableData: [], 
  } 
 }, 
 methods: { 
  handleSelectionChange(sels) { 
   this.sels = sels 
  }, 
  delGroup() { 
    let state = this.sels.map(item => item);//获取所有选中行的数据
    for (let i =0;i<state.length;i++) {
      this.deleteList();
    }
  }, 
 } 
} 
</script>

相关文章

网友评论

      本文标题:vue批量操作

      本文链接:https://www.haomeiwen.com/subject/vwzkcctx.html