h-table（表格列表组件的全封装）

已于 2024-02-23 17:50:58 修改
阅读量841 收藏 8
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： windows 前端
于 2024-02-23 17:46:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46820017/article/details/136261007
该博客介绍了使用Vue进行组件封装的方法，包括h-table的封装过程，由高级查询、table表格、tool工具设置栏三大组件合成。还涉及查询组件h-highForm、右侧工具栏RightToolbar的封装，以及列表组件h-table，最后提及了vue页面使用和js文件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

概要

如何使用vue封装列表高级查看，表格多种配置使用

h-table的封装过程

（1）高级查询
（2）table表格
（3）tool工具设置栏

三大组件共同合成封装表格组件

查询组件封装 h-highForm

<template>
  <div class="high-form">
    <!-- 左侧筛选查询 -->
    <el-input
      placeholder="请输入内容"
      v-model="inputValue"
      @keydown.enter.native="search"
      class="input-with-select"
    >
      <el-select
        class="el-select"
        v-model="selectValue"
        slot="prepend"
        :placeholder="
          selectList && selectList.length > 0 ? selectList[0].label : '暂无数据'
        "
      >
        <el-option
          v-for="v in selectList"
          :key="v.value"
          :label="v.label"
          :value="v.value"
        >
        </el-option>
      </el-select>
      <!-- 清除按钮 -->
      <i
        slot="suffix"
        v-if="inputValue"
        @click="leftClear"
        class="el-input__icon el-icon-circle-close"
      ></i>
    </el-input>
    <!-- 外面的查询按钮 -->
    <el-button type="primary" @click="search" class="query-button-custom">
      查询
    </el-button>
    <!-- 右侧高级查询表单 -->
    <zy-dropdown
      trigger="click"
      placement="bottom"
      ref="dropDown"
      width="500"
      v-show="showSearch"
      v-if="highForm.length > 0"
      :hide-on-click="false"
      @visible-change="visibleChange"
    >
      <el-button>
        {
   
   {
   
   
          isShowDropdown
            ? "收起查询"
            : count
            ? `高级查询(${
     
     count})`
            : "高级查询"
        }}<i
          :class="
            isShowDropdown
              ? 'el-icon-arrow-up el-icon--right'
              : 'el-icon-arrow-down el-icon--right'
          "
        ></i>
      </el-button>
      <el-dropdown-menu slot="dropdown" :class="isTabItem ? 'nav-info' : ''">
        <el-button type="text" class="query-title">高级查询</el-button>
        <el-form
          :model="model"
          ref="ruleForm"
          class="form-content"
          label-width="120px"
        >
          <el-row
            v-for="(items, index) in highForm"
            :key="`highForm` + index"
            class="el-row-box"
          >
            <el-col
              :span="items.length <= 1 ? 24 : 12"
              v-for="i in items"
              :key="i.prop"
            >
              <el-form-item
                v-if="i.definite != false"
                :label="`${i.label}:`"
                :prop="i.prop"
              >
                <el-select
                  v-if="i.type === 'select'"
                  style="width: 240px"
                  v-model="model[i.prop]"
                  :placeholder="
                    i.placeholder ? i.placeholder : `请选择${
     
     i.label}`
                  "
                  :remote="i.remote ? i.remote : false"
                  :remote-method="i.remoteMethod"
                  :multiple="i.multiple ? i.multiple : false"
                  :collapse-tags="i.collapseTags ? i.collapseTags : true"
                  @blur="selectBlur($event, i)"
                  @focus="selectFocus($event, i)"
                  @change="selectChange($event, i)"
                  popper-class="popper-class"
                  :popper-append-to-body="true"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(j, k) in i.optList"
                    :key="k"
                    :label="
                      j[
                        i.options && i.options.label ? i.options.label : 'label'
                      ]
                    "
                    :value="
                      j[
                        i.options && i.options.value ? i.options.value : 'value'
                      ]
                    "
                  >
                    <div class="el-select__text" v-overflow-tooltip>
                      {
   
   {
   
   
                        j[
                          i.options && i.options.label
                            ? i.options.label
                            : "label"
                        ]
                      }}
                    </div>
                  </el-option>
                </el-select>
                <el-cascader
                  v-else-if="i.type === 'cascader'"
                  style="width: 240px"
                  v-model="model[i.prop]"
                  :props="i.options ? i.options : null"
                  :options="i.optList"
                  :collapse-tags="i.collapseTags ? i.collapseTags : true"
                  :filterable="i.filterable ? i.filterable : true"
                  :placeholder="
                    i.placeholder ? i.placeholder : `请选择${
     
     i.label}`
                  "
                  @change="cascaderChange"
                  @expand-change="expandChange"
                  clearable
                  :append-to-body="true"
                >
                </el-cascader>
                <el-date-picker
                  v-else-if="
                    i.type == 'year' ||
                    i.type == 'month' ||
                    i.type == 'date' ||
                    i.type == 'dates' ||
                    i.type == 'months' ||
                    i.type == 'years' ||
                    i.type == 'week' ||
                    i.type == 'datetime'
                  "
                  style="width: 240px"
                  v-model="model[i.prop]"
                  :type="i.type"
                  :placeholder="
                    i.placeholder ? i.placeholder : `请选择${
     
     i.label}`
                  "
                  :pickerOptions="
                    i.pickerOptions ? i.pickerOptions : pickerOptions
                  "
                  :value-format="i.format"
                  :format="i.type == 'week' ? 'yyyy 第 WW 周' : ''"
                  @change="singleChange"
                  :append-to-body="true"
                  popper-class="date-picker-pop"
                >
                </el-date-picker>
                <el-date-picker
                  v-else-if="
                    i.type == 'daterange' ||
                    i.type == 'monthrange' ||
                    i.type == 'datetimerange'
                  "
                  style="width: 240px"
                  v-model="model[i.prop]"
                  :type="i.type"
                  range-separator="至"
                  :start-placeholder="
                    i.startPlaceholder ? i.startPlaceholder : '开始时间'
                  "
                  :end-placeholder="
                    i.endPlaceholder ? i.endPlaceholder : '结束时间'
                  "
                  :pickerOptions="
                    i.pickerOptions ? i.pickerOptions : pickerOptions
                  "
                  :value-format="i.format"
                  :append-to-body="true"
                  popper-class="date-picker-pop"
                >
                </el-date-picker>
                <el-time-picker
                  v-else-if="i.type === 'timePicker'"
                  :placeholder="
                    i.placeholder ? i.placeholder : `请选择${
     
     i.label}`
                  "
                  v-model="model[i.prop]"
                  style="width: 100%"
                  popper-class="date-picker-pop"
                ></el-time-picker>
                <el-switch
                  v-else-if="i.type == 'switch'"
                  v-model="model[i.prop]"
                ></el-switch>
                <el-radio-group
                  v-else-if="i.type == 'radio'"
                  v-model="model[i.prop]"
                >
                  <el-radio
                    v-for="(j, k) in i.optList"
                    :label="j"
                    :key="k"
                  ></el-radio>
                </el-radio-group>
                <el-checkbox-group
                  v-else-if="i.type == 'checkbox'"
                  v-model="model[i.prop]"
                >
                  <el-checkbox
                    v-for="ch in i.checkboxs"
                    :label="ch.value"
                    :key="ch.value"
                    >{
   
   {
   
    ch.label }}</el-checkbox
                  >
                </el-checkbox-group>
                <el-input
                  v-else
                  style="width: 240px"
                  :type="i.type"
                  clearable
                  v-model="model[i.prop]"
                  :maxlength="i.maxlength"
                  :placeholder="
                    i.placeholder ? i.placeholder : `请输入${
     
     i.label}`
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <slot name="operate">
          <div class="footer">
            <el-button type="primary" size="mini" @click="search">
              查询
            </el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </div>
        </slot>
      </el-dropdown-menu>
    </zy-dropdown>
  </div>
</template>
<script>
import ZyDropdown from "./dropdown.vue";
export default {
   
   
  name: "zy-high-form",
  components: {
   
    ZyDropdown },
  props: {
   
   
    isTabItem: {
   
   
      type: Boolean,
      default: false,
    },
    // 搜索配置
    formConfig: {
   
   
      type: Array,
      default: () => [],
    },
    // 默认查询数据，如果没有默认数据，可不传
    params: {
   
   
      type: Object,
      default: () => {
   
   },
    },
    // 是否展示高级搜索
    showSearch: {
   
   
      type: Boolean,
      default: () => true,
    },
    autoParams: Function,
  },
  data() {
   
   
    return {
   
   
      //高级查询展示/隐藏
      isShowDropdown: false,
      pickerOptions: {
   
   
        disabledDate: (time) => {
   
   
          const day = 365 * 24 * 3600 * 1000; // 31536000000
          // 返回小于当前日期并近一年内的日期
          return (
            time.getTime() > Date.now() ||
            time.getTime() < Date.now() - 8.64e7 - day
          );
        },
      },
      // 查询数据源
      model: {
   
   },
      // 下拉框的值
      selectValue: "firstKeyWord",
      // 输入框的值
      inputValue: "",
      // 已选数量
      count: 0,
    };
  },
  created() {
   
   
    // 在组件挂载后设置日期选择器的z-index样式
    const datePickerPop = document.querySelector(
      ".date-picker-pop .el-picker-panel"
    );
    if (datePickerPop) {
   
   
      datePickerPop.style.zIndex = 2000;
    }
    this.resetModel();
  },
  computed: {
   
   
    //左侧下拉框
    selectList() {
   
   
      const list = [{
   
    label: "全部", value: "firstKeyWord" }];
      for (let i = 0; i < this.formConfig.length; i++) {
   
   
        const item = this.formConfig[i];
        if (item.nimble == true
最低0.47元/天 解锁文章

200万优质内容无限畅学
表格基础封装
木子的博客
09-26 293
对element表格最基础的封装
vue封装el-table表格组件
qq_42931285的博客
02-19 1556
vue封装el-table表格组件
封装好的表格(grid，JS代码)
02-16
封装好的表格，grid，使用JavaScript代码。值得参考。
js表格封装
xu_xu_0924的博客
06-28 403
//资产在线情况表格封装 ! function(global, factory) { global.Tableone = factory(); //标准模式 }(this, function() { return function(json) { /*定义变量，利用json参数引用html定义的值*/ tableId = json.tableId, theader = json.theader, style = json.style, data = json.data; ..
vue2.0虚拟列表组件【vue-virtual-scroller】
最新发布
qq_1336674576的博客
06-20 489
vue2.0虚拟列表组件【vue-virtual-scroller】
Vue2+ElementUI列表、表格组件的封装
qq_43657722的博客
03-01 3554
在日常开发中，我们经常会遇到需要展示列表数据的场景。ElementUI 提供的 el-table 组件是一个功能强大的表格组件，可以满足大部分的需求。但是，在实际应用中，我们往往需要根据业务需求对 el-table 组件进行二次封装，以提高开发效率和代码的复用性。
表格插件的封装
DDDDwade的博客
11-15 812
//创建组件 function Grid(args){ //判断各种重要数据是否存在 try{ //如果渲染区域不存在 if(!args.renderTo){ throw "渲染区域不存在"; } //判断初始化数据是否存在 if(!args.colums){ throw "必要数据“列名”不存在"; } //判断初始化数据是否存在 if(!a...
av-table是居于ant-design-vue（版本3.2.20） 的 a-table组件封装的虚拟列表组件.zip
04-02
在这个场景中，我们关注的是 "av-table"，这是一个针对 Ant Design Vue 的 a-table 组件进行封装的虚拟列表组件。 首先，让我们深入理解 Ant Design Vue 的 a-table 组件。a-table 是 Ant Design Vue 的核心组件之...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在Vue.js开发中，组件化是一种常见的最佳实践，它...此外，Element UI提供了丰富的UI组件和良好的文档支持，使得基于它的组件封装变得相对简单。总的来说，这个封装策略符合Vue.js的设计原则，能够提升项目的整体质量。
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
表格封装使用
0.0 的博客
09-10 382
<myfrom :roleList="goodList" //表格内容接收数据 :columns="columns" //表格的配置项 :expandOptions="expandOptions" //是否展开行 @handleSizeChange="handleSizeChange" //每页 val 条点击事件 （分页） @handleCurrentChange="handleCurrent...
js 表格组件
12-05
web 端表格组件，可灵活配置，动态加载数据，支持排序功能
element表格封装
长歌的博客
01-12 1933
经过百度和element官网指导以及个人努力，攒了个表格组件，目前适应系统的需求，发表一下，做个记录，因此，就不公开献丑了。 MyTable组件页面 <!-- MyTable组件 --> <template> <div class="myTable"> <el-table :data="tableData" border stripe style="width: 1
Vue手搓轮子系列——表格封装（一）
qq_42766764的博客
02-18 1888
一种vue3的表格封装方法，使用方式类似于element-plus，方法简单易用。
功能强大的表格组件
非著名程序员
10-21 778
【公众号回复 “1024”，免费领取程序员赚钱实操经验】大家好，我是章鱼猫。今天的推荐依然是来自于读者的投稿，非常好，希望大家投稿继续，有好的开源项目欢迎大家向我们投稿。据作者描述这个开...
table自定义表格的封装
浩星
07-21 1710
前言： 对原生的table进行封装，让他满足我们一行显示不同个的需求。 实现效果：如图所示，一行显示不同数量的内容 实现代码： 1、封装的组件：custom_table.vue，源码看下面 （1）一行显示几个td (2)表头数据，表格数据 （3）js封装核心方法 2、调用方法：有form是为了必填的*效果，可根据实际情况增删 <Form :model="orderDetail" label-position="left" :label-w......
关于表格组件
qq_54432917的博客
04-01 267
在 index.js 文件的 render() 方法中，页面渲染分为两部分：表格组件和其他动态展示的组件。表格组件的核心属性包括 columns（定义表头）和 dataSource（数据源，通常为数组）。通过列配置中的关键属性 dataIndex（指向数据源字段）、title（列标题）和 key（唯一标识），表格组件将数据源中的字段值映射到对应的列上，实现数据的清晰展示。
table组件
d23333k的博客
04-28 567
Table 组件使用<el-table>标签定义，在该标签中绑定 data对象数组后，在el-table-column>中使用prop属性对应对象中的键名，即可将数据添加到表格中；使用label属性可以定义表格的列名，使用width属性可以定义表格的宽度。Flement Plus组件库提供了Table组件，用于展示多条结构类似的数据，例如工资表涯程表和计划表等，可以对数据进行排序、筛选、对比或其他自定义操作。tableData数组对象。2在上述代码中，第2行代码绑定data数组对象 tableData；
封装一个表格vue-element
weixin_43983711的博客
09-09 363
共用组件 TableModule.vue <template> <divclass="employment-block"> <slotname="header"></slot> <el-tableborder:data="tableData":header-cell-style=" {backgroundColor:'#F5F6FA',color:'#222'}"class="b-r-12cus...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@逆风boy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值