分頁管理|搜索 代碼

<template>
  <div class="clientManage">
    <!--客戶管理表格-->
        <el-table 
        :data="newClientData.length>pageNumber?newData:newClientData"
         @selection-change="selectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="客戶姓名" prop="name" width="80"></el-table-column>
          </el-table-column>
        </el-table>
 
    <!--分頁組件-->
        <el-pagination
          @current-change="currentChange"
          :page-size="pageNumber"
          :total="!userName?clientData.length:newClientData.length"
          :current-page="currentChangeIndex"
        >
        </el-pagination>
  </div>
</template>

<script>
  import {mapState} from "vuex"

  export default {
    name: "clientManage",
    data() {
      return {
        newData:[],//搜索的時候從新弄個數組
        userName:"",//搜索變量
        pageNumber: 4,//當前顯示幾頁
        currentChangeIndex: 1,//設置當前頁
        clientData: [],//獲取所有的客戶
        newClientData: [] // 偵聽屬性弄個新數組     
      }
    },
    methods: {
      /*搜索用戶姓名*/
      /*當<el-table>的數據:data是一個動態數據時，若表格具備selection列，且對selection列操作的事件(例如selection-change)也具備對變量的操作。*/
      searchInput(){
        this.currentChangeIndex=1;
        if(this.userName===""){
          this.newClientData = this.clientData.slice(this.pageNumber * (this.currentChangeIndex - 1), this.pageNumber * this.currentChangeIndex);
        }else {
            this.newClientData=this.clientData.filter(data => !this.userName || data.name.includes(this.userName));
          if(this.newClientData.length>=this.pageNumber){
            this.newData=this.newClientData.slice((this.currentChangeIndex-1)*this.pageNumber,this.currentChangeIndex*this.pageNumber);
          }
        }
      },
      /*selectionChange事件*/
      selectionChange(selection) {
        this.piLiang = selection;
        this.deleteWorker = selection.map(item => item.clid).join(",");
        if(selection.length>0){
          this.isDisabled=false
        }else {
          this.isDisabled=true
        }
      },
      /*點擊分頁事件*/
      currentChange(current) {
        this.currentChangeIndex=current;
        if(this.newClientData.length>this.pageNumber){
          this.newData= this.newClientData.slice(this.pageNumber * (current - 1), this.pageNumber * current)
        }else {
          this.newClientData = this.clientData.slice(this.pageNumber * (current - 1), this.pageNumber * current)
        }
      }
     
  
    },
    watch: {
      /*深度偵聽原數組*/
      clientData: {
        deep: true,
        immediate: true,
        handler: function (newValue, oldValue) {
          this.newClientData = newValue.slice(this.pageNumber * (this.currentChangeIndex - 1), this.pageNumber * this.currentChangeIndex)
        }
      }
    },
    computed: {
      ...mapState(["workerId"])
    },
    mounted() {
      /*獲取所有商品*/
      let url = "/api/staff/clientQueryByWid.jsp";
      let data = {
        wid: this.workerId
      };
      this.$axios.post(url, this.qs.stringify(data)).then(res => {
        this.clientData = res.data
      })
    }
  }
</script>

<style scoped>
 
</style>