Vue3:封装Table 表格组件

组件官网 elementPlus : 点击跳转

封装组件

创建新的组件文件: Table.vue

<!-- 
 PropTableS : 父组件传递过来的数据 (对象)
 PropTableS.tables : 父组件传递的对象中 存放表格每行显示的数据
 PropTableS.keyS : 父组件传递过来的对象,里面就是表头的列数据显示
-->
 <el-table
        class="singleTableRef"
        ref="singleTableRef"
        :data="PropTableS.tables"
         border
         highlight-current-row
         @selection-change="handleSelectionChange"
         row-key="id"
        :header-cell-style="{background:'#f0f2f7'}"
        :scrollbar-always-on="true"
        :default-sort="{ prop: 'date', order: 'descending' }"
         max-height="644"
      > 
      
        <template v-for="(child,key) in PropTableS.keyS">
          <el-table-column  :prop="key" :type="child.type" :label="child.title" :sortable="child.sortable"  :width="child.width" :show-overflow-tooltip="child.show_overflow_tooltip" >
            //是否点击跳转
            <template v-if="child.link" v-slot="scope" >
              <el-link  type="primary"  @click="Selectuser(scope.row)">
                {{scope.row.order_sn}}
              </el-link>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" fixed="right"  width="180">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              Edit
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>

2.接收父组件传递过来的数据

<script setup lang="ts">
  import {defineProps,onMounted,ref} from 'vue'
  //接收父组件传递的数据  
  const props = defineProps({
          PropTableS:{
            type:Object,
          }
  })

  onMounted(()=>{
     //props.PropTableS.tableStyle f父组件传递过来的表格css样式
     let TabDom = document.querySelector('.singleTableRef')
     for (const item in props.PropTableS.tableStyle) {
        TabDom.style[item] = props.PropTableS.tableStyle[item]
     }
  })
</script>

3.父组件代码

<template>
    <!-- v-if 控制组件显示,如果不控制会导致组件  :PropTableS(子组件接收的名称)="PropTableS(这是我传递的值)" -->
    <Table v-if="ShiwTable"  :PropTableS="PropTableS"  ></Table>
</template>


//引入组件
import {Table} from "@/components";


let PropTableS = ref(null)



//点击查询按钮
function Receive_Data(params:any) {
 console.log('表单传递过来的查询参数',params);
  GetTabList(params.value).then(result =>{
      PropTableS.value = result
    }).catch(error=>{
  })
}


function GetTabList(params:boject) {  
  //调用团购接口测试数据
 return new Promise((resolve,reject)=>{
  let pageParams = {
      page_size:20,
      page:1
    }
    axios.GetGoodsList(params||pageParams).then(res=>{
      //自己定义的表头信息
      let data = {
        selection:{
          type:'selection',
          width:50,
          custom:true // 是否标识自定义
        },
        index:{
          type:'index',
          title:'ID',
          width:50,
          custom:true // 是否标识自定义
        },
        goods_name:{
          title:'商品名称',
        },
        sku:{
          title:'商品SKU',
        },
        goods_sn:{
          title:'商品货号',
        },
        store_name:{
          title:'店铺',
        },
        goods_img:{
          title:'商品图片',
        },
        color_name:{
          title:'颜色',
        },
        size_name:{
          title:'尺码',
        },
        goods_stock:{
          title:'库存',
        },
        goods_status_text:{
          title:'商品状态',
        },
      }
      let list = {}
      list.keyS = data
      //后端返回的表格显示数据
      list.tables = res.list
      //表格的样式
      list.tableStyle = {
          width : '99%',
          margin : 'auto',
          height : '645px',
      }
       resolve(list); 
    }).catch(error => {
       reject(error);
    });
 })
}



  GetTabList().then(result =>{
    PropTableS.value = result 
    if(PropTableS.value){
      ShiwTable.value = true
    }
    }).catch(error=>{
    console.error('获取表格数据失败:', error);
  })

效果:

相关推荐
baiduopenmap6 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish13 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull17 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i26 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_28 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun34 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜38 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html