Advertisement

vue基于elementUI选择表格数据

阅读量:

.

代码:

复制代码
 <template>

    
   <div class="table_wrap">
    
   <el-table :data="tableData" 
    
       size="mini" stripe style="width: 100%" border 
    
       ref="multipleTable" @selection-change="handleSelectionChange">
    
       <el-table-column type="selection" width="55"></el-table-column><!-- 显示选取表格 -->   
    
       <el-table-column prop="id" label="ID" width="45px"></el-table-column>
    
       <el-table-column prop="groupName" label="所属集团" width="80px"></el-table-column>
    
       <el-table-column prop="companyName" label="公司名称"></el-table-column>              
    
   </el-table>
    
     <div style="margin-top: 10px;float: left;">
    
       <!-- <el-button type="primary" @click="getSelected()">获取选中结果</el-button> -->
    
       <el-button @click="toggleSelection()">取消选择</el-button>
    
     </div>
    
  
    
   </div>
    
 </template>
    
 <script>
    
   export default {
    
     data() {
    
       return {
    
     multipleSelection: [],//表格选取的
    
     },
    
     methods: {
    
       //保存选中结果
    
       handleSelectionChange(val) {
    
     this.multipleSelection = val;
    
     console.info(this.multipleSelection);
    
       },
    
       // //获取选中结果
    
       // getSelected() {
    
       //   console.info(this.multipleSelection);
    
       //   console.info(this.$refs.multipleTable.tableData);
    
       //   console.info(this.$refs.multipleTable);
    
       // },
    
     
    
       //取消选择
    
       toggleSelection() {
    
     this.$refs.multipleTable.clearSelection();
    
     
    
       },
    
     }
    
  }
    
 </script>
    
    
    
    

全部评论 (0)

还没有任何评论哟~