Vue封装elementUI的表格控件，包含查询

最新推荐文章于 2023-01-30 17:35:56 发布
最新推荐文章于 2023-01-30 17:35:56 发布
阅读量776 收藏 3
点赞数
分类专栏： 封装 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43634334/article/details/110476899
版权

控件结构

在这里插入图片描述

/TableAddQuery index.vue

<template>
  <div class="table-add-query">
    <Query ref="query" :show-search="queryOptions.showSearch" :select-lists="queryOptions.selectLists"
           :show-date-picker="queryOptions.showDatePicker" :picker-options="queryOptions.pickerOptions"
           @getList="getList"
    ></Query>
    <Table ref="table" :table-lists="tableOptions.tableLists" :table-lists-opt="tableOptions.tableListsOpt" @indexMethod="indexMethod">
      <template v-for="item in slotLists" :slot="item" slot-scope="{ row }"><slot :name="item" :row="row"></slot></template>
    </Table>
    <Pagination
      v-if="$refs.query"
      v-show="tableOptions.total > 0"
      :total="tableOptions.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    >
    </Pagination>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Table from '@/components/TableAddQuery/components/Table'
import Query from '@/components/TableAddQuery/components/Query'

export default {
  name: "Index",
  components: {
    Pagination,
    Table,
    Query
  },
  props: {
    queryOptions: {
      type: Object,
      default: () => ({
        selectLists: {}
      })
    },
    tableOptions: {
      type: Object,
      default: () => ({
        total: 0,
        tableLists: [],
        tableListsOpt: {
          showIndex: false,
          content: []
        }
      })
    },
  },
  computed: {
    listQuery() {
      return this.$refs.query.listQuery
    },
    table() {
      return this.$refs.table
    },
    slotLists() {
      const content = this.tableOptions.tableListsOpt.content;
      const slotLists = []
      content.forEach(item => {
        Object.keys(item).forEach(temp => {
          if (temp === 'slot') {
            slotLists.push(item[temp]);
          }
        })
      })
      return slotLists
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      const listQuery = this.listQuery
      this.table.tableLoading = true;
      this.$emit('getList', listQuery, val => {
        if (val) {
          this.table.tableLoading = false;
        } else {
          this.getList();
        }
      })
    },
    indexMethod(idx, callBack) {
      callBack(idx + 1 + (this.listQuery.page - 1) * this.listQuery.limit);
    },
  }
}
</script>

/Query.vue

<template>
  <div class="filter-container">
    <el-input
      v-if="showSearch"
      v-model="listQuery.searchField"
      placeholder="搜索UID(精准查询)/用户名(模糊查询)"
      style="width: 300px;"
      class="search-input"
      prefix-icon="el-icon-search"
      @keyup.enter.native="handleFilter"
    />
    <div class="select-filter">
      <el-select v-for="(values, key, index) in selectLists" :key="index" v-model="listQuery[key]" class="search-input select-item" :placeholder="values.placeholder" clearable style="width: 140px">
        <el-option
          v-for="config in values.option"
          :key="config.value"
          :label="config.label"
          :value="config.value"
        />
      </el-select>
    </div>
    <!--suppress SpellCheckingInspection -->
    <el-date-picker
      v-if="showDatePicker"
      v-model="listQuery.timeBetween"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :clearable="true"
      align="right"
    >
    </el-date-picker>
    <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
      查询
    </el-button>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { setZeroTime } from '@/utils/dateFormat'

export default {
  name: "Query",
  directives: { waves },
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    selectLists: {
      type: Object,
      default: () => ({})
    },
    showDatePicker: {
      type: Boolean,
      default: false
    },
    pickerOptions: {
      type: Object,
      default: () => ({
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            let now = new Date();
            now = now.setDate(now.getDate() + 1)
            now = new Date(now);
            const end = setZeroTime(now);
            const start = setZeroTime(new Date());
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            let now = new Date();
            now = now.setDate(now.getDate() + 1)
            now = new Date(now);
            const end = setZeroTime(now);
            const start = setZeroTime(new Date());
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            let now = new Date();
            now = now.setDate(now.getDate() + 1)
            now = new Date(now);
            const end = setZeroTime(now);
            const start = setZeroTime(new Date());
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      })
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        searchField: undefined,
        timeBetween: undefined
      }
    }
  },
  created() {
    const selectLists = this.selectLists;
    const listQuery = this.listQuery;
    Object.keys(selectLists).forEach(item => {
      this.$set(listQuery, item, undefined);
    })
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      // this.getList() 获取数据,修改为向父组件传递
      this.$emit('getList', this.listQuery)
    },
  }
}
</script>

<style scoped lang="scss">
  .search-input >>> .el-input__inner{
    height: 36px !important;
    line-height: 36px !important;
  }

  .select-filter{
    margin-top: 3px;
    display: inline-block;
  }

  .select-item:not(:last-of-type){
    margin-right: 4px;
  }
</style>

/Table.vue

<template>
  <el-table
    :key="tableKey"
    v-loading="tableLoading"
    :data="displayTableList"
    fit
    border
    highlight-current-row
    style="width: 100%;"
  >
    <el-table-column v-if="tableListsOpt.showIndex" :index="indexMethod" label="序号" type="index" align="center" width="50"></el-table-column>
    <el-table-column v-for="item in tableListsOpt.content" :key="item.key" :prop="item.prop" :label="item.label" :align="item.align" :min-width="item.minWidth">
      <template slot-scope="{ row }">
        <slot v-if="item.slot" :name="item.slot" :row="row"></slot>
        <span v-else>{{ row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "Table",
  props: {
    tableLists: {
      type: Array,
      default: () => []
    },
    tableListsOpt: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableKey: 0,
      tableLoading: true
    }
  },
  computed: {
    displayTableList() {
      return this.tableLists
    },
  },
  methods: {
    indexMethod(idx) {
      let index = null
      this.$emit('indexMethod', idx, val => {
        index = val
      })
      return index
    }
  }
}
</script>

/Pagination.vue

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        // return [10, 20, 30, 50]
        return [10,20,30,40,50,100,200,500]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 10px 10px;
  border-radius: 8px;
  /* box-shadow: 0 0 6px 0 #dcded7; */
}
.pagination-container.hidden {
  display: none;
}
</style>

调用格式

/userlist.vue

export default {
  data() {
    return {
      queryOptions: {
        showSearch: true,
        showDatePicker: false,
      },
      tableOptions: {
        total: 0,
        tableLists: [],
        tableListsOpt: {
          showIndex: true,
          content: [
            {
              key: 1,
              label: '用户ID',
              prop: 'userid',
              align: 'center',
              minWidth: 140,
            },
            {
              key: 2,
              label: '用户名',
              prop: 'username',
              align: 'center',
              minWidth: 140,
            },
            {
              key: 3,
              label: '状态',
              align: 'center',
              minWidth: 100,
              slot: 'status'
            },
            {
              key: 4,
              label: '点数余额',
              align: 'center',
              minWidth: 120,
              slot: 'balance'
            },
            // {
            //   key: 5,
            //   label: '收点限制',
            //   prop: '',
            //   align: 'center',
            //   minWidth: 120,
            // },
            // {
            //   key: 6,
            //   label: '单笔最高转出',
            //   prop: '',
            //   align: 'center',
            //   minWidth: 150,
            // },
            // {
            //   key: 7,
            //   label: '单日累计最高转出',
            //   prop: '',
            //   align: 'center',
            //   minWidth: 180,
            // },
            {
              key: 8,
              label: '注册时间',
              prop: 'created_time',
              align: 'center',
              minWidth: 180,
            },
            {
              key: 9,
              label: '最近登陆',
              prop: 'current_login_time',
              align: 'center',
              minWidth: 180,
            },
            {
              key: 10,
              label: '操作',
              align: 'center',
              minWidth: 270,
              slot: 'options',
            },
          ],
        },
      },
    }
  },
}

/fundlist.vue

export default {
  name: 'Index',
  components: {
    TableAddQuery
  },
  data() {
    return {
      queryOptions: {
        showSearch: true,
        selectLists: {
          fundType: {
            placeholder: '全部类型',
            option: [
              {
                value: 0,
                name: 'shiftTo',
                label: '转入'
              },
              {
                value: 1,
                name: 'rollout',
                label: '转出'
              }
            ]
          },
          fundStatus: {
            placeholder: '订单状态',
            option: [
              {
                value: 0,
                name: 'new',
                label: '新建'
              },
              {
                value: 1,
                name: 'underway',
                label: '进行中'
              },
              {
                value: 2,
                name: 'completed',
                label: '已完成'
              },
              {
                value: 3,
                name: 'failed',
                label: '失败'
              }
            ]
          }
        },
        showDatePicker: true,
      },
      tableOptions: {
        total: 0,
        tableLists: [],
        tableListsOpt: {
          showIndex: true,
          content: [
            {
              key: 1,
              label: '订单编号',
              prop: 'id',
              align: 'center',
              minWidth: 140
            },
            {
              key: 2,
              label: '账户名称',
              prop: 'user',
              align: 'center',
              minWidth: 180
            },
            {
              key: 3,
              label: '订单类型',
              prop: 'type',
              align: 'center',
              minWidth: 180
            },
            {
              key: 4,
              label: '点数',
              prop: 'amount',
              align: 'center',
              minWidth: 180
            },
            {
              key: 5,
              label: '手续费',
              prop: 'fee',
              align: 'center',
              minWidth: 160
            },
            {
              key: 6,
              label: '状态',
              prop: 'status',
              align: 'center',
              minWidth: 140
            },
            {
              key: 7,
              label: '操作时间',
              prop: 'updated_time',
              align: 'center',
              minWidth: 180
            },
          ]
        }
      },
    }
  },
}

**

插槽代入

只需要在tableListsOpt.content里面配置slot属性就能使用具名插槽了，妙啊。**

<TableAddQuery :query-options="queryOptions" :table-options="tableOptions" @getList="getList">
    <template slot="status" slot-scope="{ row }">
      {{ row.status == 1?'正常':row.status == 2?'禁用':'' }}
    </template>
</TableAddQuery>
qq_43634334
关注
专栏目录
vue3+ts+elementui-plus二次封装树形表格
蜗牛~~
07-25 1474
【代码】vue3+ts+elementui-plus二次封装树形表格。
vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能
最新发布
蜗牛~~
07-27 2087
我只定义了三层数据，就只演示展开了三层，还可以多层，自己设置即可。
vueelementuiexcel报表设计器插件
08-10
此插件 使用vue 基于element-ui，样式使用less语法，使用前应确保相关依赖已安装
vue封装element-ui的表格
实习打字猿的博客
04-26 544
# Table.vue src/components/Tabel.vue <template> <div> <div class="mb-3" v-if="showAdd"> <el-button type="success" size="medium" @click="handleAdd"> 点击添加 </el-button> </div> <el-tabl
Vue - 简单封装elementUI表格
技术共享，共同进步！
05-08 293
<template> <el-table class="table" :data="tableData" border stripe style="width: 100%"> <!-- 循环 table 列 --> <template v-for="(item, index) in fields"> <el-table-column :prop="item.prop" :label="ite
vue项目中封装elementui表格组件的使用；elementui可编辑表格
qq_44308109的博客
11-12 3411
1. 在components里创建一个文件夹，在文件夹里创建一个el-table.vue组件，组件代码如下 <template> <div class="elTableModule"> <el-table :data="tabOptions.tableData" border style="width: 100%;"> /* 使用插槽去自定义表格最左边一列的内容，例如表格需加入多选框列时*/ <sl
vue+vue-resource+elementUI table组件实现增删改查和分页源码
08-30
实现功能：1.表格增删改查 2.表格分页3.excel导入导出
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
在Vue.js框架中结合Element UI库开发Web应用时，经常需要处理用户与表格元素的交互。本示例探讨了如何实现在Vue+Element UI中，当用户点击表格内的单元格时触发特定事件，并弹出一个对话框。Element UI提供了一个...
vue2 + element-ui 表格的封装
vip66611的博客
07-27 918
element-ui项目的表格封装
vue+elementUI实现自定义表单模板组件（一）
weixin_43930421的博客
05-30 4280
前言 如下图，实现一个可以自定义的表单。本文以实现思路为主，并未提供完整代码。 思路 1、页面布局为左中右布局：左边显示可以定义的表单控件，中间显示预览效果，右边则为选中某个控件后可以编辑的属性。如下图，先择单选项后，可以编辑选项。 2、使用 vuedraggable 拖拽组件，直接拖动左边的控件到中间生成表单。vuedraggable 文档可查阅： https://github.com/SortableJS/Vue.Draggable （你也可以不使用该组件，直接利用点击事件，点击左边控件后在中间生成
基于Vue+element-ui 的Table二次封装的实现
10-18
主要介绍了基于Vue+element-ui 的Table二次封装的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
vue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demo
CombiningQueriesTools:基于element-ui的树形多条件组合查询组件。包括分组与、分组或等功能，含简单的添加功能
04-28
多条件组合查询工具 基于element-ui的树形多条件组合查询组件。包括分组与、分组或等功能，含简单的添加功能。 如果帮助到你，请给个的Star！
elementui带输入建议查询_elementUi简单实现搜索提词功能
weixin_29453497的博客
01-07 742
上周又又又又加需求了，好吧，bring it on先讲需求目标要实现功能focus的时候要出历史搜索(要存缓存)历史搜索下部出现清除缓存按钮input的时候要根据后台返回出提词elementui中比较能用的上就是 el-autocomplete 这个组件，但是呢，组件中要添加清除按钮，这个是比较麻烦的。因为，el-autocomplete 这个东西的slot是写弹框的每一项，而不是弹框整体，所以，...
Vue+ElementUI前端实现分页和模糊查询
m0_47352999的博客
07-06 3358
1.变量的定义： tableData：该变量用来向表格中展示数据。 tempDate：该变量用来保存在后台请求过来的所有数据，便于模糊查询时进行匹配。 2.computed和watch方法 watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来。当Vue视图中的数据变化时, 关联的函数会被执行。 watch可以监听data里面值的变化。当input输入框中的值发生变化的时候，与其关联的函数便会执行。 3.向后台请求数据的方法，写在methods里面 4.表格.
VUE学习笔记：2.vue的选项(options)及生命周期
ouyicnm的博客
06-04 679
1.vue对象的常见选项(options) 我们在实例化一个Vue对象后，会使用它的选项。如：el,data等。 详细的讲解，参考文档：https://cn.vuejs.org/v2/api/#search-query-nav 我们目前需要掌握以下几个选项： 2.vue的生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的
vue-query 初探
qq_43345846的博客
01-30 2772
vue-query，类似于vuex/pinia，以缓存为目的，但侧重的是对网络请求的缓存。这是我预想的使用场景：假设在各个页面都需要发起相同的请求，去获取数据，而这种数据在一定时间内不会发生变化，那么这种请求数据是可以被缓存下来的。当然，用法不止于此，你也可以去缓存分页数据、查询数据…
Query操作option的添加、删除、取值
wxljmy的专栏
10-30 2173
Query操作option的添加、删除、取值 JQuery中对option的添加、删除、取值 jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("opti
Elasticsearch搜索类型(query type)详解
donlian的专栏
07-20 1197
关于我，邯郸人。 对这类话题感兴趣？欢迎发送邮件至donlianli@126.com 请支持原创http://donlianli.iteye.com/blog/2094305 es在查询时，可以指定搜索类型为QUERY_THEN_FETCH,QUERY_AND_FEATCH,DFS_QUERY_THEN_FEATCH和DFS_QUERY_AND_FEATCH。那么这4种搜索...
vue二次封装elementui表格
03-16
Vue二次封装ElementUI表格可以通过以下步骤实现： 1. 创建一个新的Vue组件，例如MyTable.vue。 2. 在MyTable.vue中引入ElementUI的Table组件，并将其作为模板的根元素。 3. 在MyTable.vue中定义props属性，以便从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值