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);
  })

效果：