說明： vue中引入element元件中 封裝 tabel表格，表格中包含查詢，分頁，全選
一，元件部分

<template>
  <div>
    <el-dialog
      :title="titleName"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="年份" v-show="isShowYear">
          <el-select v-model="formInline.Year" placeholder="全部">
            <el-option
              v-for="yearItem in yearList"
              :key="yearItem.YearCode"
              :label="yearItem.YearName"
              :value="yearItem.YearCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="季度" v-show="isShowSeason">
          <el-select v-model="formInline.Season" placeholder="全部">
            <el-option
              v-for="yearItem in seasonList"
              :key="yearItem.QuarterCode"
              :label="yearItem.QuarterName"
              :value="yearItem.QuarterCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" v-show="isShowBrand">
          <el-select v-model="formInline.Brand" placeholder="全部">
            <el-option
              v-for="yearItem in brandList"
              :key="yearItem.PingPCode"
              :label="yearItem.PingPName"
              :value="yearItem.PingPCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店鋪編號" v-show="isShowStore">
          <el-input placeholder="店鋪" v-model="formInline.BrandchName"
                    clearable @clear="clearBranchId">
            <template slot="append">
              <el-button @click="selectStoreDialog" icon="el-icon-tickets"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="客戶型別" v-show="isShowCustomerType">
          <el-select v-model="formInline.CustomerType" placeholder="請選擇活動區域">
            <el-option label="全部" value="-1"></el-option>
            <el-option label="直營" value="1"></el-option>
            <el-option label="加盟" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月份" v-show="isShowMonth">
          <el-select v-model="formInline.Month" placeholder="請選擇活動區域">
            <el-option
              v-for="monthItem in monthList"
              :key="monthItem.monthCode"
              :label="monthItem.monthName"
              :value="monthItem.monthCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="扣款金額" v-show="showAmount">
          <el-input v-model="formInline.Amount" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="佔比" v-show="showPercent">
          <el-input v-model="formInline.Percent" placeholder="請輸入數值"></el-input>
        </el-form-item>
        <el-form-item label="預計庫存率" v-show="showRate">
          <el-input v-model="formInline.StockForcast" placeholder="請輸入數值"></el-input>
        </el-form-item>
        <el-form-item label="商場補給金額" v-show="showSupplyAmount">
          <el-input v-model="formInline.Amount" placeholder="請輸入數值"></el-input>
        </el-form-item>
        <el-form-item label="品牌比率" v-show="showBrandRate">
          <el-input v-model="formInline.Percent" placeholder="請輸入數值"></el-input>
        </el-form-item>
        <el-form-item label="選擇圈子" v-show="showCircleCode">
          <select-circle :canClearable="true" @addCircle="addCircle" :propsSelectedOptions="currentCircleCode"></select-circle>
        </el-form-item>
        <el-form-item label="費用型別" v-show="showCostType">
          <el-select v-model="formInline.costType" placeholder="全部">
            <el-option
              v-for="costType in costTypeList"
              :key="costType.Id"
              :label="costType.TypeSubName"
              :value="costType.TypeId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addList">確 定</el-button>
      </div>
    </el-dialog>
    <select-store :isShowCheckbox="true" :tableData="storeList"
                  :show.sync="showStore" v-if="flag" @outputSelectUser="getSelectStore"></select-store>
  </div>
</template>

<script>
  import {searchYearList, searchQuarterList, searchPingPList, SearchBranchInfo, searchManageCostType} from '@/api/amoeba'
  import SelectCircle from '@/views/circleplus/components/selectCircle/index'
  import selectStore from './selectStore'
  export default {
    data() {
      return {
        currentCircleCode: [],
        costTypeList: [],
        flag: false,
        monthList: [
          {monthCode: 1, monthName: '一月'},
          {monthCode: 2, monthName: '二月'},
          {monthCode: 3, monthName: '三月'},
          {monthCode: 4, monthName: '四月'},
          {monthCode: 5, monthName: '五月'},
          {monthCode: 6, monthName: '六月'},
          {monthCode: 7, monthName: '七月'},
          {monthCode: 8, monthName: '八月'},
          {monthCode: 9, monthName: '九月'},
          {monthCode: 10, monthName: '十月'},
          {monthCode: 11, monthName: '十一月'},
          {monthCode: 12, monthName: '十二月'}
        ],
        showStore: false,
        editCon: {
          brandName: '',
          seasonName: '',
          CustomerTypeName: ''
        },
        titleName: '',
        listLoading: false,
        formInline: this.formData,
        yearList: [],
        seasonList: [],
        brandList: [],
        storeList: [],
        visible: this.show
      }
    },
    components: {
      selectStore,
      SelectCircle
    },
    mounted() {
      this.getYearData()
      this.getSeasonData()
      this.getBrandData()
      this.getManageCostTypeData()
    },
    props: {
      showCostType: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      showCircleCode: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      isShowYear: {
        type: Boolean,
        default: function() {
          return true
        }
      },
      showBrandRate: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      showSupplyAmount: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      showAmount: {
        type: Boolean,
        default: function() {
          return false
        }
      },
      isShowSeason: {
        type: Boolean,
        default: function() {
          return true
        }
      },
      isShowBrand: {
        type: Boolean,
        default: function() {
          return true
        }
      },
      isShowMonth: false,
      isShowStore: false,
      isShowCustomerType: true,
      showPercent: false,
      showRate: {
        type: Boolean,
        default: function() {
          return true
        }
      },
      show: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: function() {
          return {
            Year: '',
            Season: '',
            Brand: '',
            Percent: '',
            CustomerType: '',
            StockForcast: '',
            Amount: '',
            CircleCode: '',
            costType: ''
          }
        }
      },
      isAddItem: false // true表示新增 false表示修改
    },
    methods: {
      getManageCostTypeData() {
        searchManageCostType('', '').then(res => {
          this.costTypeList = res.data
        })
      },
      addCircle(circle) {
        if (circle && circle.code) {
          this.formInline.CircleCode = circle.code
        } else {
          this.formInline.CircleCode = ''
        }
        // this.getList()
      },
      getSelectStore(data) {
        console.log(data)
        this.formInline.BrandchName = data[0].ShortName
        this.formInline.BrandchId = data[0].BranchId
      },
      selectStoreDialog() {
        console.log('選擇店鋪')
        this.showStore = true
        SearchBranchInfo('0').then(res => {
          this.storeList = res.data
          this.flag = true
        })
      },
      clearBranchId() {
        console.log('清除')
      },
      selectStore() {
        console.log('選擇店鋪')
        this.showStore = true
      },
      addList() {
        this.visible = false
        if (this.isAddItem) {
          console.log('新增')
          this.titleName = '新增'
          this.$emit('sureAddItem', this.formInline)
        } else {
          this.titleName = '修改'
          console.log('修改')
          console.log(this.formInline)
          for (const i in this.seasonList) {
            if (this.seasonList[i].QuarterCode === this.formInline.Season) {
              this.editCon.seasonName = this.seasonList[i].QuarterName
            }
          }
          for (const i in this.brandList) {
            if (this.brandList[i].PingPCode === this.formInline.Brand) {
              this.editCon.brandName = this.brandList[i].PingPName
            }
          }
          if (this.formInline.CustomerType === '1') {
            this.editCon.CustomerTypeName = '直營'
          }
          if (this.formInline.CustomerType === '2') {
            this.editCon.CustomerTypeName = '加盟'
          }
          if (this.formInline.CustomerType === '-1') {
            this.editCon.CustomerTypeName = '全部'
          }
          console.log(this.editCon)
          console.log('--------------------')
          this.$emit('editItem', this.editCon)
        }
      },
      getYearData() {
        if (this.yearList.length === 0) {
          this.listLoading = true
          searchYearList().then(res => {
            this.yearList = res.data
            this.listLoading = false
          })
        }
      },
      getSeasonData() {
        if (this.seasonList.length === 0) {
          this.listLoading = true
          searchQuarterList().then(res => {
            this.seasonList = res.data
            this.listLoading = false
          })
        }
      },
      getBrandData() {
        if (this.brandList.length === 0) {
          this.listLoading = true
          searchPingPList('0', '1').then(res => {
            this.brandList = res.data
            this.listLoading = false
          })
        }
      }
    },
    watch: {
      show() {
        this.visible = this.show
        if (!this.visible) {
          this.formInline = {
            Year: '',
            Season: '',
            Brand: '',
            Percent: '',
            CustomerType: '',
            StockForcast: '',
            BrandchId: '',
            Month: '',
            CircleCode: '',
            costType: ''
          }
        }
      },
      formData(val) {
        this.formInline = val
        this.currentCircleCode = [this.formInline.CircleCode]
      }
    }
  }
</script>


 

二，引入表格分頁元件

<select-store :isShowCheckbox="true" :tableData="storeList"
                  :show.sync="showStore" v-if="flag" @outputSelectUser="getSelectStore"></select-store>

storeList 表示請求到的表格資料
// 獲取在表格中選中的資料
getSelectStore(data) {
  console.log(data)
  },