Element-ui二次封装一个带图片展示的高通用性table表格

最新推荐文章于 2023-07-25 16:13:02 发布
置顶 最新推荐文章于 2023-07-25 16:13:02 发布
阅读量1.8k 收藏 40
点赞数 10
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39246667/article/details/106055007
版权

使用Element-ui框架也很久了，最近项目中有个应用场景，如下图示：
在这里插入图片描述
在这里插入图片描述
如上截图，在这个table表格中，有显示类文本，有image图片，有switch开关，还有数据编辑操作列。
话不多说，开撸：
首先，在项目文件夹的components中新建CommonTable.bue文件，先生成一个标准的vue页面模板:

<template>
    <div>
		
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

下面，我们去把element-ui中复制table组件源码，然后针对这个源码进行2次改造，建议对组件中的自定义列模板复制哦：
在这里插入图片描述

<template>
    <el-table :data="tableData" style="width: 100%" v-loading="config.loading">
    	<!-- 这里是对tableLableList列表中的字段进行过滤，处理image字段 -->
      <el-table-column
        v-for="item in tableLabelList.filter(el => el.prop === 'image')"
        :key="item.prop"
        show-overflow-tooltip
        :label="item.label"
        :width="item.width ? item.width : 75"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <img
              :src="scope.row.imageUrl"
              alt=""
              style="width:100px;height:100px"
            />
          </span>
        </template>
      </el-table-column>
	  <!-- 这里对常规文本类型进行处理，对过滤出image和switch之后的字段进行循环绑定 -->
	  <el-table-column
        v-for="item in tableLabelList.filter(
          ele => ele.prop !== 'image' && ele.prop !== 'status'
        )"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 180"
      >
        <template slot-scope="scope">
          <span style="margin-left:10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
	
	<!-- 处理switch开关 -->
	<el-table-column
        v-for="item in tableLabelList.filter(ele => ele.prop === 'status')"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 50"
      >
        <template slot-scope="scope">
            <!-- switch开关：之所以disableed，是不希望在这里进行状态修改，而是通过编辑的方式提交post请求修改 -->
            <el-switch disabled v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>	
    </el-table>
	
	<!--数据操作列，可以根据实际情况进行逻辑处理 -->
	<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
</template>

<script>
    export default {
  		// 接收父组件传参
        props: {
        	tableData: Array, // 存放父组件传递过来的表数据
        	tableLabelList: Array, // 存放父组件传递过来的表字段数据
        	config:Object	// 配置项，比如表格每一页多少条数据，数据的加载状态,v-loading指令
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
           }
    }
    }
</script>
<style lang="scss" scoped>
</style>

上面是整个table组件的完成代码，为了不至于篇幅太长影响阅读，我把二次封装不同类型的代码分开放在下面：

  • 封装表格项中的img图片：
	<el-table-column
        v-for="item in tableLabelList.filter(el => el.prop === 'image')"
        :key="item.prop"
        show-overflow-tooltip
        :label="item.label"
        :width="item.width ? item.width : 75"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <img
              :src="scope.row.imageUrl"
              alt=""
              style="width:100px;height:100px"
            />
          </span>
        </template>
      </el-table-column>
  • 封装常规的文本类型：
<el-table-column
        v-for="item in tableLabelList.filter(
          ele => ele.prop !== 'image' && ele.prop !== 'status'
        )"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 180"
      >
        <template slot-scope="scope">
          <span style="margin-left:10px">{{ scope.row[item.prop] }}</span>
        </template>
</el-table-column>
  • 封装switch开关：
<el-table-column
        v-for="item in tableLabelList.filter(ele => ele.prop === 'status')"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 50"
      >
        <template slot-scope="scope">
            <!-- switch开关：之所以disableed，是不希望在这里进行状态修改，而是通过编辑的方式提交post请求修改 -->
            <el-switch disabled v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>

注意，我这里的处理逻辑是通过判断tableLabelList表头的prop属性，过滤出tableLabelList中不同的表头，处理不同的类型。

既然上面已经二次封装好了，那么就去使用吧:
例如，我这里在GoodsManager.vue页面中引入CommonTable组件：

<script>
// 引入组件
import CommonTable from "@/components/CommonTable"
export default{
	//2、注册组件
	components:{
		CommonTable,	// 实际上是: CommonTable:CommonTable，key和value一致时可以省略
	}
}
</script>

使用组件和传参：

	<!-- 在需要使用CommonTable表格的地方-->
	 <common-table
	 	<!-- 传参-->
          :tableData="saleList"
          :tableLabel="tableLabel"
          :config="config"
        ></common-table>

数据如下,在data下初始化数据:

data(){
	return{
		config: {
        page: 1,
        total: 20,
        loading: false //加载数据
        },
		tableLabel: [
        {
          prop: 'image',
          label: '图片',
          type: 'image',
          width: 200
        },
        {
          prop: 'label',
          label: '商品名称',
          width: 300
        },
        {
          prop: 'ficti',
          label: '虚拟销量'
        },
        {
          prop: 'stock',
          label: '库存'
        },
        {
          prop: 'sales',
          label: '销量'
        },
        {
          prop: 'status',
          label: '状态'
        }
  		],
  		// tableData
  		tableData:[
			{
    type: 1,
    label: '德尔玛家用床上除螨仪/吸尘器杀菌净化45min续航一体收纳充电CM2000白色',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/33fb5f29f0f52236a85831c8655b9bde.jpg',
    ficti: 20,
    price: 299,
    classify: '卫浴清洁',
    stock: 10000,
    sales: 68,
    status: true,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 2,
    label: '云麦体脂秤称重女智能精准成人脂肪测量仪家用电子体重秤',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/fb40e23473563d0853bb02bc4baa2ea2.jpg',
    ficti: 30,
    price: 99,
    classify: '日用杂货',
    stock: 0,
    sales: 90,
    status: true,
    unit_name: '台',
    keywords: ''
  },
  {
    type: 1,
    label:
      '荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 6GB+64GB 冰岛幻境',
    image:
      'http://demo26.crmeb.net/uploads/attach/2020/04/27/b2bf3cf3be8a983c1920da54fb9f8579.jpg',
    ficti: 22,
    price: 2699,
    classify: '数码产品',
    stock: 800,
    sales: 10,
    status: true,
    unit_name: '台',
    keywords: ''
  },
  {
    type: 2,
    label: '【超品预售】TOMFORD汤姆福特唇膏4色TF口红黑管套装礼盒16',
    image:
      'http://demo26.crmeb.net/uploads/attach/2020/04/24/7092e35b87c2849b5f7c48b3e8175f98.jpg',
    ficti: 10,
    price: 399,
    classify: '彩妆香氛',
    stock: 30,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 1,
    label: '极蜂天文望远镜天地两用可连接手机拍照望远镜观星星观月亮观景白色',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/759a8317831bbcf71d199277d2f3a8ce.jpg',
    ficti: 10,
    price: 399,
    classify: '数码产品',
    stock: 20,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 2,
    label: '心想智能胶囊咖啡机S1102智能全自动手机APP可调2种模式',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/824200dd43d4eb8e7c185993c82b54ad.jpg',
    ficti: 10,
    price: 1999,
    classify: '数码产品',
    stock: 0,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 1,
    label: '莱克吉米手持无线吸尘器除螨除尘组合家用大吸力静音',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/2a21667934bd7e26c7edd02687efdd34.jpg',
    ficti: 10,
    price: 499,
    classify: '卫浴清洁',
    stock: 400,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 1,
    label: '火候进口整木砧板乌檀木实木家用厨房菜板防霉切菜板',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/4b77ed78767c49b05d365d01b1d95d99.jpg',
    ficti: 10,
    price: 499,
    classify: '日用杂货',
    stock: 50,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 1,
    label: '本来设计挂钟原木时钟创意现代简约实木北欧客厅卧室钟表',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/fd79a0af5d4a3eda1572cae99f6725c5.jpg',
    ficti: 10,
    price: 499,
    classify: '日用杂货',
    stock: 30,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  },
  {
    type: 2,
    label: '本来设计挂钟原木时钟创意现代简约实木北欧客厅卧室钟表',
    image:
      'http://demo26.crmeb.net/uploads/attach/2019/05/23/fd79a0af5d4a3eda1572cae99f6725c5.jpg',
    ficti: 10,
    price: 1499,
    classify: '卫浴清洁',
    stock: 30,
    sales: 10,
    status: false,
    unit_name: '件',
    keywords: ''
  }
		]
	}
}

通过情况，tableData都是通过调用https接口获取的数据列表。

总的来说，二次封装的大致思路如下：

  • 1、拷贝element-ui源码到我们自己的文档(不熟悉时，我们可以手写便于熟悉element-ui)
  • 2、抽取出需要父类传参的数据，定义props接收
  • 3、通过v-for指令进行循环和绑定数据
  • 4、通过v-if指令对需要不同类型渲染的数据进行不同的处理
  • 5、在父组件中引入我们二次封装的子组件，并传参。
清渡欢LL
关注
专栏目录
element-ui查看大图
向天再借十万根
12-05 8602
element-ui图片（查看大图），可通过 previewSrcList 开启预览大图的功能。 写在element-ui表格中，使用作用域插槽循环图片 <!-- template插槽 --> <template slot-scope="scope"> <div class="demo-image__preview"> <el-image style="width: 100%; height: 100%" :src="scope.ro
vue2 + element-ui 表格的封装
vip66611的博客
07-27 941
element-ui项目的表格封装
封装一个优雅的element ui表格组件
weixin_33705053的博客
12-12 1199
现在做后台系统用vue + elementUI 的越来越多，那element ui的 el-table 组件肯定也离不开。虽然element ui的table组件很好。但是表格和分页是分离的。每次写表格的时候都要写分页。这个就比较麻烦了。那我们可不可以把表格和分页封装在一起呢？照这个思路那我们重新封装一个带分页的表格。 思路： 表格组件...
带图片的JTable
it小虾米的专栏
12-09 601
import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import java.text.NumberFormat; import javax.swing.Icon; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.s
element UI多图片展示
weixin_46443403的博客
04-18 7873
vue，element UI
vue element-ui table中图片的显示
Lear的博客
12-06 1万+
实现如下图片展示效果： 页面：html/vue <el-table :data="tableData" border style="width: 100%;margin-top:20px;"> <el-table-column prop="picture" label="头像" align="center"> ...
vue+element-ui表格封装tag标签使用插槽
10-15
表格组件（el-table）是Element-UI中的一个重要组成部分，它提供了丰富的功能来展示和管理数据。通过v-for指令，可以在el-table中循环数据，生成表格行。每个表格列通过el-table-column定义，可以设置列的属性，如...
vue element-ui table 组件封装使用
最新发布
06-07
在Vue.js开发中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI组件，包括我们今天要讨论的Table组件。Table组件在实际项目中经常用于展示数据，但每个项目的需求可能各不相同，因此对其进行封装能...
Vue+element-ui Table二次封装实践详解
基于Vue+element-ui的Table二次封装旨在创建一个高度可配置和可复用的表格组件。它能够帮助开发者快速构建符合项目需求的表格，同时减少重复代码，提高代码的可维护性。封装时应考虑组件的灵活性，使其能适应各种...
基于Element封装一个表格组件tableList的使用方法
10-15
本文将介绍如何基于 Element UI 封装一个名为 tableList 的表格组件。该组件封装了以下功能： 1. 支持直接传入后台请求地址渲染列表，当参数变化后能自动刷新表格数据； 2. 允许用户自定义每一列的显示方式和内容；...
elementUi 中图片预览功能
weixin_56534242的博客
07-25 1706
【代码】elementUi 中图片预览功能。
Element-ui中的el-image的图片预览功能（:preview-src-list）
热门推荐
CSDN_XHC的博客
05-20 2万+
今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是当点击图片时，就预览当前点击的图片。 所以我将其修改了一下，功能就是当点击一行表格中的一个图片时，这个图片就被预览了，代码很简单，就是直接复制element-ui中的图片预览组件就行 <el-table-column label="员工照片" align="center"> <template slot-scope="scope"&gt..
vue项目elementUI预览图片
肖帅的博客
12-15 2万+
vue项目elementUI预览图片 说明： 1，elementUI组件中已经实现了图片预览，点击图片会有预览的功能 2，需求产品需求，要不展示图片，点击“图片预览按钮或链接”才显示图片的预览功能，如下图所示 如上图所示，只有点击 图片预览 按钮才会有图片预览的效果，实现方案如下：有两种方案： 第一种：使用ref进行操作 1，将el-image标签中渲染后的图片进行隐藏 2，使用ref进行操作，在el-image标签中声明ref属性 3，通过Element源码得知，预览图片组件中控制是否显示使用的属性是
vue如何让element-ui的table列表中展示多张图片（可放大）的效果？
weixin_48373171的博客
03-31 1万+
element-ui、vue、js
基于element ui的图片预览插件
yufengguanyun的博客
02-18 591
写插件很简单，满足两个条件即可，一、基本的逻辑思路，二、熟悉插件语法要求。本次Vue插件也比较简单，点击“查看图片”用轮播的方式限制用户上传的图片，如图： 项目采用的是vue-element-admin 在‘src/components’下新建‘imgPreview’文件夹，然后在该文件夹下新建‘ImgPreview.vue’，‘index.js’两个文件，代码如下： ImgPreivew.vue 1 2 3 4 5 6 7 ..
超美观的 Vue+Element 开源后台管理 UI
weixin_37097680的博客
12-01 487
点击上方果汁简历，选择“置顶公众号”优质文章，第一时间送达EuiAdmin是基于Vue+Element等组件联合开发的一个免费的开源后台，你可以通过（euiadmin.com）进行下...
elementUI图片遍历循环+预览【el-image查看大图+预览】
ZZhXuan的博客
10-31 6195
我这边接受的数据结构 { "code":200, "msg":"图片列表", "object": [ { "id":1," partsName":"", "picturesName":"a.jpg", "picturesUrl":"http://192.168.3.65:8111/image/a.jpg", "type":null } ] } 接收： this.outsidePicturesList = response.object; 我在页面显示的 <
Vue 使用 ElementUI 构建表格 --柚子真好吃
java
11-23 1077
Vue 使用 ElementUI 构建表格 --柚子真好吃一、安装Element二、前台代码 注：该文章内容在搭建好vue-cli的环境下进行。 文章代码参考：https://blog.csdn.net/liaoxuewu/article/details/81184821 一、安装Element 登录element官网查看教程：https://element-angular.faas.ele...
【若依】element-ui 图片展示到前端、图片点击放大展示
hhmmj的博客
05-10 2212
【若依】element-ui 图片展示到前端、图片点击方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值