vue3 Table 封装_vue3table组件封装

新建组件TableComponents.vue

<template>
      <el-table
        ref="singleTableRef"
        v-loading="listLoading"
        width="100%"
        height="100%"
        :data="tableData"
        :border="true"
        highlight-current-row
      >
          <el-table-column type="index" label="序号" width="55" fixed align="center" />
            <template v-for="(item,index) in tableOption" :key="index">
              <el-table-column :property="item.prop" :label="item.label" :min-width="item.width || 120" />
            </template>
          <el-table-column
            v-if="operation"
            label="操作"
            :min-width="operationWidth || 100"
            align="center">
            <template  #default="scope">
                <slot name="menu" :scopeData="scope" />
            </template>
          </el-table-column>
      </el-table>
   
</template>

<script lang='ts' setup name='MainBox'>
import { th } from "element-plus/lib/locale";
import { ref, watch, onMounted } from "vue"

const props = defineProps({
    tableOption:{
      type: Array,
      default: () => {
        return []
      }
    },
    
    // 列表数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },

    // 操作按钮
    operation:{
      type: Boolean,
      default: function () {
        return false
      }
    },

    // 操作列宽度
    operationWidth:{
       type:[String, Number],
       default:() => {
        return 100
       }
    },

    // 加载动画
    listLoading:{
      type:Boolean,
      default:() => {
        return false;
      }
    },

    // 行状态颜色
    cellStyle:{
      type:Function,
      default:null,
    },

  
})

// table数据
let tableData = ref<Object[]>(props.tableData)

// table列配置项
type M = {
  [propName:string]:any,
}
let tableOption = ref<M[]>(props.tableOption)

// 监听table数据变化，达到实时更新
watch(props,(newValue,oldValue) => {
  tableData.value = props.tableData;
  console.log(newValue,oldValue,'1212212128989')
});

// 操作列显示影藏
let operation = ref<boolean>(props.operation)

// 操作列宽度
let operationWidth = ref<String | Number>(props.operationWidth)



</script>
<style lang='scss' >


</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

父组件 调用

<template>
    <div class="layout-box">
        <!-- tabble -->
        <div class="tabblebox" ref="tableHeight">
            <TableComponent   
            :listLoading="tabLoading"
            :tableData="tableData"   
            :tableOption.sync="tableOption" 
            :operation="false" 
            :cellstyle="cellStyle"
            operationWidth="200" >
                <template v-slot:menu >
                    <el-button type="primary" v-has="`${pageName}:search`" size="small">Primary</el-button>
                    <el-button color="#626aef" size="small">Default</el-button>
                </template>
            </TableComponent>
        </div>
    </div>
</template>
<script lang="ts" setup name="Inventoryflow">
import { onMounted, ref, reactive, toRefs, toRaw } from 'vue';

import TableComponent from "@components/Table/TableComponent.vue";

// pinia
import { useStore } from '@/store';
const store = useStore();

const pageName: string = 'Inventoryflow';

let tabLoading = ref<boolean>(false)

// table配置项
let tableOption = ref<Object[]>([
    {label:"订单编号", prop:"orderNo", width:"160"},
    {label:"时间",     prop:"stockDate",   width:"170"},
    {label:"状态",     prop:"statusName",  width:"120"},
    {label:"仓库",     prop:"warehouseName",width:"260"},
    {label:"仓区",     prop:"warehouseAreaName", width:"150"},
    {label:"品类",       prop:"catName", width:"160"},
    {label:"总库存(吨)", prop:"totalStockWeight"},
    {label:"变动重量(吨)", prop:"weight"},
    {label:"成本", prop:"cost"},
])
// table数据
let tableData = ref<Object[]>([]);


</script>

<style lang="scss" scoped>
.layout-box {
    width: 100%;
    height: 100%;

    // 弹出层
    .dialogbox {
        width: 100%;
        height: 650px;
    }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

还没封装完，后续会继续更新。。。