vue 针对表格的封装

FilterTable.vue

<el-form :model="form">

      <el-table

        ref="table"

        v-loading="tableLoading"

        :data="tableData"

        :row-key="rowKey"

        @selection-change="handleSelectionChange"

      >

        <el-table-column

          :reserve-selection="reserveSelection"

          type="selection"

          width="80"

          v-if="selection"

        />

        <el-table-column

          v-for="(item, index) in columns"

          :key="index"

          v-bind="item"

          :formatter="item.render"

          :show-overflow-tooltip="tooltip"

          :render-header="item.renderHeader"

        />

      </el-table>

    </el-form>

    <el-pagination

      :current-page="currentPage"

      :page-size="pageSize"

      :page-sizes="pageSizes"

      :layout="layout"

      :total="total"

      @size-change="sizeChange"

      @current-change="currentChange"

      @prev-click="prevClick"

      @next-click="nextClick"

      @quick-prev-click="quickPrevClick"

      @quick-next-click="quickNextClick"

    />

  data() {

    return {

      form: {},

      inputVal: '',

      checkedColumns: [],

      columns: []

    }

  },

  watch: {

    columns: function (val) {

      this.checkedColumns = val.map((item) => item.label)

    },

    columnsList: {

      handler: function (val) {

        // this.columns = val.filter((item) => item.isShow)

        this.columns = val.filter((item) => !item.isHidden)

        console.log(this.columns)

      },

      immediate: true

    }

  },

method: {

handleSelectionChange(val) {

      this.$emit('update:multipleSelection', val)

    },

    handleRowClick(row) {

      this.$refs.multipleTable.toggleRowSelection(row)

    },

    clearSelection() {

      this.$refs.table.clearSelection?.()

    },

    inputChange() {

      console.log(this.form)

    },

    handleView(row) {

      this.$emit('handleView', row)

    },

    handleEdit(row) {

      this.$emit('handleEdit', row)

    },

    resetColumns() {

      this.checkedColumns = this.columns.map((item) => item.label)

    },

    delCheckedColumns(index) {

      this.checkedColumns.splice(index, 1)

    },

  beforeClose(done) {

      this.checkedColumns = this.columns.map((item) => item.label)

      done()

    },

    sizeChange(currentSize) {

      this.$emit('sizeChange', currentSize)

    },

    currentChange(currentPage) {

      this.$emit('currentChange', currentPage)

    },

    prevClick(currentPage) {

      this.$emit('prevClick', currentPage)

    },

    nextClick(currentPage) {

      this.$emit('nextClick', currentPage)

    },

    quickPrevClick(currentPage) {

      this.$emit('quickPrevClick', currentPage)

    },

    quickNextClick(currentPage) {

      this.$emit('quickNextClick', currentPage)

    }

}

-- 封装完结

组件调用

   <FilterTable

      style="max-width: 100%; width: 100%"

      :columnsList="columnsList"

      :tableData="tableData"

      :currentPage="currentPage"

      :pageSize="pageSize"

      :totalCount="totalCount"

      :tableLoading="tableLoading"

      layout="total,sizes,prev,pager,next,jumper"

      @sizeChange="handleSizeChange"

      @currentChange="handleCurrentChange"

      @prevClick="handlePrevClick"

      @nextClick="handleNextClick"

    />

 columnsList: [

        {

          prop: 'appName',

          label: ‘表头一’,

          render: (row) => {

            return <span>{row.appName || '--'}</span>

          }

        },

        {

          prop: 'prefix',

          label: ‘‘表头二’,

          render: (row) => {

            return <span>{row.prefix || '--'}</span>

          }

        },

        {

          prop: 'deployCode',

          label: ‘表头三’,,

          render: (row) => {

            return <span>{row.deployCode || '--'}</span>

          }

        },

        {

          prop: 'country',

          label: ‘表头四’,,

          render: (row) => {

            return <span>{row.country || '--'}</span>

          }

        },

// 传入就会填充表格

tableData： [

{

          appName: "bdm_shop_code",

          country: "CN",

          createdDate: "2022-01-14 10:11:38",

          currentValue: 1110132,

          deployCode: "",

          description: null,

          id: 88,

          lastModifiedDate: "2022-02-21 11:11:08",

          length: 6,

          prefix: "浅醉",

          province: "35",

          strategy: 1,

          strategyDescription: "国家码 + 省份码 + 长度"

        },

        {

          appName: "bdm_code",

          country: "CZ",

          createdDate: "2022-01-14 10:11:38",

          currentValue: 1110132,

          deployCode: "",

          description: null,

          id: 88,

          lastModifiedDate: "2022-02-21 11:11:08",

          length: 6,

          prefix: "前缀",

          province: "35",

          strategy: 1,

          strategyDescription: "国家码 + 长度"

        }

]