基于element-ui封装下拉表格组件

当下拉数据很多时，我们需要封装成一个下拉表格的组件，可以分页，模糊搜索
searchCostItem.vue

<template>
  <div>
    <el-popover v-model="popVisible" width="700" trigger="click" placement="bottom">
      <div>
        <FBATable
          ref="countryTableRef"
          :data="tableData"
          height="300"
          :rowHeader="countryColumns"
          @rowClick="handleRowClick"
        ></FBATable>
        <div class="demo-footer">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.PageIndex"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pagination.PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.TotalCount"
          >
          </el-pagination>
        </div>
      </div>
      <el-input v-model="keyWords" @input="changeKey" :placeholder="placeholder" slot="reference" :CatId="CatId"> </el-input>
    </el-popover>
  </div>
</template>
<script>
import { delay } from '@/utils/index'
import { wfinFeeItemGetPageList } from '@/api/OverseasWarehouse/Cost'
import FBATable from '@/components/FBATable'
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: () => 0
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    CatId: {
      type: Number
    }
  },
  components: {
    FBATable
  },
  data() {
      return {
      pagination: {
        TotalCount: 0,
        PageIndex: 1,
        PageSize: 10
      },
      tableData: [],
      countryColumns: [
        {
          prop: 'NameCn',
          label: '中文名',
          align: 'center'
        },
        {
          prop: 'NameEn',
          label: '英文名',
          align: 'center'
        },
        {
          prop: 'FeeItemCode',
          label: '费用项编码',
          align: 'center'
        },
        {
          prop: 'FeeItemTypeStr',
          label: '费用类型',
          align: 'center'
        }
      ],
      popVisible: false,
      selected: [],
      timer: null
    }
  },
  created() {},
  computed: {
    keyWords: {
      get() {
        return this.name
      },
      set(val) {
        this.$emit('update:name', val)
      }
    }
  },
  watch: {
    CatId: {
      handler(newVal, oldVal) {
        this.getList(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getList(CatId) {
      const { PageSize, PageIndex } = this.pagination
      wfinFeeItemGetPageList({
        PageSize,
        PageIndex,
        NameCn: this.keyWords,
        CatId: CatId ? CatId : 0
      })
        .then(res => {
          if (res.ErrorCode === 0) {
            this.tableData = res.Body.Items
            this.pagination.TotalCount = res.Body.TotalCount
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
        handleSelectionChange(val) {
      if (val.length >= 2) {
        let arrays = val.splice(0, val.length - 1)
        arrays.forEach(row => {
          this.$refs.countryTableRef.$refs.FBATable.toggleRowSelection(row) //除了当前点击的，其他的全部取消选中
        })
      }
      this.$emit('selectedData', { list: val, index: this.index })
      this.timer = setTimeout(() => {
        this.popVisible = false
      }, 500)
    },
    handleRowClick(val) {
      this.$emit('selectedData', { list: val, index: this.index })
      this.timer = setTimeout(() => {
        this.popVisible = false
      }, 200)
    },
    // 搜索
    changeKey() {
      delay(() => {
        this.pagination.PageIndex = 1
        this.getList()
      }, 200)
    },
    handleSizeChange(val) {
      this.pagination.PageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pagination.PageIndex = val
      this.getList()
    }
  },
  destroyed() {
    clearTimeout(this.timer)
  }
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
  position: relative;
  margin: 15px 10px;
}
.demo-footer {
  display: flex;
  justify-content: flex-end;
}
.country-footer {
  text-align: center;
  position: relative;
  margin: 10px auto;
}
</style>

delay.js

export const delay = (function() {
  let timer = 0
  return function(callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()

FBATable.vue

<template>
  <div>
    <el-table
      ref="FBATable"
      border
      :data="data"
      :span-method="spanMethod"
      :max-height="height"
      :header-cell-style="
        showHeaderStyle
          ? { background: '#f1f2f7', color: '#333' }
          : { background: 'none' }
      "
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <el-table-column
        type="selection"
        v-if="showCheckBox"
        width="55"
      ></el-table-column>
      <el-table-column type="index" v-if="showIndex" width="55" label="序号">
      </el-table-column>
      <el-table-column
        v-for="(col, index) in rowHeader"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :fixed="col.fixed"
        :align="col.align"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="col.render"
            :render="col.render"
            :row="scope.row"
            :index="scope.$index"
            :column="col"
          >
          </ex-slot>
          <span v-else>
            {{ scope.row[col.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-end" v-if="isPagination">
      <el-pagination
        :hide-on-single-page="false"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="PaginationData.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="PaginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PaginationData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },

  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }

    if (data.props.column) params.column = data.props.column
    return data.props.render(h, params)
  }
}
export default {
  name: 'FBATable',
  components: {
    'ex-slot': exSlot
  },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表头数据
    rowHeader: {
      type: Array,
      default: () => {
        return []
      }
    },
    showCheckBox: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showIndex: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    height: {
      type: String,
      default: () => {
        return 'auto'
      }
    },
     spanMethod: {
      type: Function,
      default: () => {
        return ''
      }
    },
    PaginationData: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        total: 0
      })
    },
    isPagination: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showHeaderStyle: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
 methods: {
    handleSelectionChange(val) {
      this.$emit('getSelection', val)
    },
    handleRowClick(row) {
      this.$emit('rowClick', row)
    },
    // 	pageSize 改变时会触发
    handleSizeChange(val) {
      this.$emit('pageSizeChange', val)
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      this.$emit('pageCurrentChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
	.tableHeader {
	  background: #1890ff;
	}
	.pagination-end {
	  width: 100%;
	  margin-top: 20px;
	  display: flex;
	  justify-content: flex-end;
	}
</style>

在页面中引用

            <SearchCostItem
              v-model="form.FeeItemName"
              :name.sync="form.FeeItemName"
              @selectedData="selectedFeeItem"
              :CatId="form.CatId"
              placeholder="选择费用项"
            />

展示效果