关于element中table的二次封装

最新推荐文章于 2024-08-28 14:00:38 发布

想吃辣椒炒肉呀

最新推荐文章于 2024-08-28 14:00:38 发布

阅读量1.8k

点赞数 4

本文链接：https://blog.csdn.net/mengweizhao/article/details/119211499

版权

本文介绍了如何对Element UI的Table组件进行二次封装，包括SearchForm的封装、表格功能增强（如多选、排序）以及分页配置。在实际使用中，需要根据项目需求调整后端请求地址和参数处理方法。

摘要由CSDN通过智能技术生成

element中table的二次封装

table二次封装分为三部分，头部搜索区域以及table中数据的操作
table的主题部分，实现table的多选，排序，等一些小功能（border,斑马线样式等）
table下的分页部分，默认显示，可以通过配置为不显示，也可以配置一些pageSize,pageNum等，
表单具体内容如下：（某些功能看组件中）

SearchForm的封装

<template>
  <div class="search-form">
    <el-form ref="searchForm" :inline="true" :model="form_data">
      <el-form-item
        v-for="item in searchConfig"
        :key="item.prop"
        :label="item.label"
      >
        <!-- 文本框 -->
        <el-input
          v-if="item.type == 'input'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请输入'"
          clearable
        ></el-input>
        <!-- 下拉框 -->
        <el-select
          :style="`width:${item.width}`"
          v-else-if="item.type == 'select'"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          clearable
          filterable
        >
          <el-option
            v-for="optionItem in item.options"
            :key="optionItem.value"
            :label="optionItem.label"
            :value="optionItem.value"
          ></el-option>
        </el-select>
        <!-- 日期 -->
        <el-date-picker
          v-else-if="item.type == 'date'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          type="date"
          :value-format="item.format ? item.format : 'yyyy-MM-dd'"
          :format="item.format ? item.format : 'yyyy-MM-dd'"
        >
        </el-date-picker>
        <!-- 月份 -->
        <el-date-picker
          v-else-if="item.type == 'month'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          type="month"
          :value-format="item.format ? item.format : 'yyyy-MM'"
          :format="item.format ? item.format : 'yyyy-MM'"
        >
        </el-date-picker>
        <!-- 年份 -->
        <el-date-picker
          v-else-if="item.type == 'year'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          type="year"
          :value-format="item.format ? item.format : 'yyyy'"
          :format="item.format ? item.format : 'yyyy'"
        >
        </el-date-picker>
        <!-- 日期范围 -->
        <el-date-picker
          v-else-if="item.type == 'daterange'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :value-format="item.format ? item.format : 'yyyy-MM-dd'"
          :format="item.format ? item.format : 'yyyy-MM-dd'"
        >
        </el-date-picker>
        <!-- 级联 -->
        <el-cascader
          v-else-if="item.type == 'cascader'"
          :style="`width:${item.width}`"
          v-model="form_data[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          :options="item.options"
          filterable
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="search">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
   
  props: {
   
    searchConfig: {
   
      type: Array,
      default: () => [],
    },
    form_data: {
   
      type: Object,
      default: () => {
   },
    },
  },
  created() {
   },
  data() {
   
    return {
   };
  },
  methods: {
   
    // 搜索
    search() {
   
      this.$emit("search");
    },
    // 重置
    reset() {
   
      let reset_form = {
   };
      this.searchConfig.forEach((item) => {
   
        if (item.defaultValue) {
   
          this.$set(reset_form, item.prop, item.defaultValue);
        }
      });
      this.$emit("update:form_data",