vue+elementUI實現 分頁表格的單選或者多選

1、vue+elementUI實現 分頁表格前的多選

多選效果圖：

 代碼以下：

<el-table
          ref="multipleTable"
          :data="listData"
          tooltip-effect="dark"
          :default-sort="{ prop: 'date', order: 'descending' }"
         :stripe="true"
         :max-height="TABLEHEIGHT"
          @selection-change="handleSelectionChange"
        >
         <el-table-column type="selection" min-width="55"></el-table-column>
         <el-table-column label="ID"  prop="id"  align="left"  width="80"></el-table-column>

 <div class="city-list-body-pagination">  
         <el-pagination
          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="height:40px;city-height:40px;"
        ></el-pagination>
      </div>
 
 export default class carAcct extends Vue {
   private multipleSelection: any = []
   private listData: any = []
   private currentPage = 1
   private total = 0
   private pageSize = 20
   private TABLEHEIGHT = document.documentElement.clientHeight - 272
 
     private handleSizeChange (e: any) {
     this.pageSize = e
     this.listPage()
   }
   private handleCurrentChange (e: any) {
     this.currentPage = e
     this.listPage()
   }
   private handleSelectionChange (val: any) {
     this.multipleSelection = val
   }
 }

 

1、vue+elementUI實現 分頁表格前的單選

單選效果圖：

 

主要是使用elementUI提供的table中的toggleRowSelection（row, selected）方法，
　　*該方法用於多選表格，切換某一行的選中狀態，若是使用了第二個參數，則是設置這一行選中與否（selected 爲 true 則選中）

這和上面的多選差很少徹底同樣，只是在選擇方法 handleSelectionChange中加上判斷：

1 if (val.length > 1) {
2       (this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
3       val.splice(0, 1)
4     }

特別說明一下：由於我用的TypeScript，而TypeScript 又是強類型檢查，因此  this.$refs.multipleTable  改爲了  (this.$refs.multipleTable as any)，否則會報如下錯誤：

若是不是使用的TypeScript，能夠直接寫成如下格式：

 if (val.length > 1) {
      this.$refs.multipleTable.toggleRowSelection(val[0], false)
       val.splice(0, 1)
}

總代碼以下：

<el-table
          ref="multipleTable"
          :data="listData"
          tooltip-effect="dark"
          :default-sort="{ prop: 'date', order: 'descending' }"
         :stripe="true"
         :max-height="TABLEHEIGHT"
          @selection-change="handleSelectionChange"
        >
         <el-table-column type="selection" min-width="55"></el-table-column>
         <el-table-column label="ID"  prop="id"  align="left"  width="80"></el-table-column>

 <div class="city-list-body-pagination">  
         <el-pagination
          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="height:40px;city-height:40px;"
        ></el-pagination>
      </div>
 
 export default class carAcct extends Vue {
   private multipleSelection: any = []
   private listData: any = []
   private currentPage = 1
   private total = 0
   private pageSize = 20
   private TABLEHEIGHT = document.documentElement.clientHeight - 272
 
     private handleSizeChange (e: any) {
     this.pageSize = e
     this.listPage()
   }
   private handleCurrentChange (e: any) {
     this.currentPage = e
     this.listPage()
   }
   private handleSelectionChange (val: any) {
     if (val.length > 1) {
      (this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
      val.splice(0, 1)
    }
     this.multipleSelection = val
   }
 }