Element el-table 表格二次封装

·  阅读 2283

内容背景

公司开发的管理后台系统需要用到大量的表格数据,每个页面内容大致相同,为了便于后期维护,便考虑将el-table进行封装,将公共部分内容提取出来,后期只需对表格内容进行维护即可。

使用到的技术:

  • vue
  • Element-ui

封装内容

简单来说,就是把el-table中的属性数据显示都是用父组件传进来,都可以自定义。

官方的el-table组件

  • 表格属性:

    项目常用属性:data,显示表格数据;

    height:定义table表格的高度。

    stripe: 表格为斑马纹。

    filter-multiple:数据过滤的选项是否多选。

  • 表格方法:

    row-class-name:行的className回调方法,用来给指定行进行颜色高亮区分。

    sort-change: 当表格的排序条件发生变化的时候会触发该事件。

    filter-change: 表格筛选条件发生变化的时候会触发该事件。

封装表格

<el-table 
    ref="filterTable"
    :row-class-name="tableRowClassName"
    border 
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData" 
    :height="height || undefined"
    :max-height="height || undefined"
    :cell-style="cellStyle"
    :default-sort = "{prop: 'id', order: null}"
    @sort-change="sortChange"
    @filter-change="handleFilterChange"
    style="width: 100%">
    <template v-for="(item, index) in columns">
      <el-table-column
        :show-overflow-tooltip="true"
        v-if="item.show != false" 
        :key="index"
        :sortable="item.sortable"
        :prop="item.prop"
        :label="item.label"
        :align="item.align ? item.align : 'left'"
        :width="item.width"></el-table-column>
        <template v-for="(filter, index) in item.filterColums">
            <!-- 表格内联下拉框样式-->
          <el-table-column
            v-if="filter.type == 'select' && filter.show != false"
            :label="columnLabel[index]"
            :key="filter.lable"
            :prop="filter.prop"
            :show-overflow-tooltip="true"
            :fixed="filter.fixed ? filter.fixed : false"
            :width="filter.width ? filter.width : ''"
            :filter-multiple="multiple"
            :filters="filter.filtersList"
            :filter-method="filterMethod"
            :column-key="filter.prop">
            <template slot-scope="props">
              <el-select
                class="select-row"
                v-if="filter.part == 'sell'"
                v-model="props.row.sell_id"
                placeholder="请选择"
                @change="filterChange(props.row)"
                style="height: 25px;">
                <el-option
                  v-for="filter in filtersList"
                  :key="filter.id"
                  :label="filter.realname"
                  :value="filter.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        <!-- solt 自定义列-->
        <template v-if="item.type === 'slot'">
          <el-table-column 
            :key="index"
            :width="item.width"
            :prop="item.prop"
            :label="item.label">
            <template slot-scope="scope">
               <slot :name="item.slotType" :row="scope.row" />
            </template>
          </el-table-column>
        </template>
    </template>
    <!-- 表格操作按钮-->
    <el-table-column 
      v-if="tableOption && tableOption.label" 
      :width="tableOption.width" 
      :label="tableOption.label" 
      fixed="right"
      align="center" 
      class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button  
          v-for="(item,index) in tableOption.options" 
          :key="index" 
          :type="item.type" 
          :icon="item.icon" 
          v-show="!scope.row.validStatus"
          @click="handleButton(item.methods,scope.row)" 
          size="mini">
          {{item.label}}
        </el-button>
      </template>
    </el-table-column>
</el-table>
复制代码

我的项目中有几处需要用到表格内下拉框的情况,所以在这里进行了一个type == 'select'的区别封装,通常使用自定义列即可满足需求,具体情况可按照自己项目进行调整

接下来就是将table中的数据内容暴露出来,供父组件传递数据。如下:

props: {
    tableData: Array,
    tableOption: Object,
    filterColums: Array,
    columns: Array,
    tableRowClassName: Function,
    loading: Boolean,
    filtersList: Array,
    filtersRoleList: Array,
    columnLabel: Array,
    filterMethod: Function,
    cellStyle: Function,
    refTable: String,
    multiple: {
      type: Boolean,
      default: false
    },
    // 监听高度
    listenHeight: {
      type: Boolean,
      default: true
    }
},
复制代码

数据暴露出来之后,再将方法暴露给父组件,如下:

methods: {
    handleButton(methods, row, event) {
      this.$emit('handleButton',{ 'methods':methods,'row':row })
    },
    filterChange (row) {
      this.$emit('filterChange', row)
    },
    filterRoleChange (row) {
      this.$emit('filterRoleChange', row)
    },
    handleFilterChange (filters) {
      this.$emit('handleFilterChange', filters)
    },
    sortChange (filters) {
      this.$emit('sortChange', filters)
    },
    switchChange (row) {
      this.$emit('switchChange', row)
    },
    rowClick (type, value) {
      this.$emit('rowClick', type, value)
    },
}
复制代码

以上,表格已经封装完毕,接下来我们开始在项目中使用他吧~

页面使用

 <Table
  :loading="loading"
  :tableData="tableData"
  :table-option="tableOption"
  :columns="tableColumns"
  :columnLabel="softwareLable"
  :filtersList="softwareFiltersList"
  :cellStyle="cellStyle"
  @handleFilterChange="handleFilterChange"
  @handleButton="handleButton">
  <template #enable="scope">
    <el-switch
      active-color="#239656"
      inactive-color="#e86161"
      v-model="scope.row.enable"
      @change="changeSwitch(scope.row, 'enable')">
    </el-switch>
  </template>
</Table>
复制代码
// tableColumns.js
export const tableColumns = [
  { prop: 'id', label: 'ID', width: 70 },
  { prop: 'name', label: '名称' },
  { prop: 'description', label: '描述'},
  {
    show: false,
    filterColums:[
      { 
        prop: 'software_name', 
        label: '适用软件', 
        type: "text", 
        filtersList: [
          {
            text: '软件1',
            value: 1
          },
          {
            text: '软件2',
            value: 2
          },
          {
            text: '软件3',
            value: 3
          },
          {
            text: '软件4',
            value: 4
          },
          {
            text: '软件5',
            value: 5
          }
        ]
      },
    ]
  },
  { prop: 'price', label: '单价'},
  { prop: 'price_range', label: '价格范围'},
  { prop: 'scale', label: '系数'},
  { show: false, prop: 'enable', label: '可用', type: 'slot', slotType: 'enable'},
]

export const tableOption = {
  label: '操作',
  width: '120',
  options: [
    { label: '', type: 'text', icon: 'el-icon-edit-outline', methods: 'edit' },
    { label: '', type: 'text', icon: 'el-icon-delete', methods: 'delete' },
  ]
}
复制代码
<script>
import Table from '@/components/myTable/index'
import { tableColumns, tableOption } from './tableColumns'
export default {
  components: {
    Table
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableOption: tableOption,
      tableColumns: tableColumns,
      softwareLable: ['软件'],
      softwareFiltersList: [],
    }
  },
  methods: {
    getTableData () {
      // 接口数据信息获取
    },
    cellStyle () {
      // 表格行内样式
    },
    handleFilterChange () {
      // 表格筛选方法
    },
    handleButton () {
      // 表格操作方法
    },
    changeSwitch () {
      // Switch 操作方法
    }
  },
}
</script>
复制代码

以上,完整的项目就可以呈现。对应的一些方法操作可自行添加。 封装不够完美,有什么好的方法欢迎大家一起讨论~

分类:
前端
分类:
前端