vue3 element plus el-table封装（一）_elemtnplus 封装table的时候 表格的每一行的按钮怎么写

---

highlight: a11y-dark

本文是对el-table的基本封装，很常规的操作，主要是对列的封装，可以根据列配置数组进行渲染，后续会追加分页,列分类格式化等扩展封装

方式一（props传递，Attributes继承）

//BaseTable.vue

<template>
  <el-table>
    <el-table-column v-for="(col,index) in config" :key="index" v-bind="col">
      <template v-if="col.slot" #default="scope" >
        <slot :name="col.slot" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
defineProps({
  config:{
    type:Object,
    default:()=>({})
  }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//index.vue

<template>
  <BaseTable :config="config" :data="tableData" :style="{width:'500px'}">
    <template #btn="{row}">
      <el-button type="primary">{{ row.btn }}</el-button>
    </template>
  </BaseTable>
</template>

<script lang="ts" setup>
import BaseTable from './BaseTable.vue'
const config=[
  {
    type:'selection'
  },
  {
    prop: 'date',
    label:'Date',
    width:'180'
  },
  {
    prop: 'name',
    label:'Name',
  },
  {
    prop: 'btn',
    label:'action',
    slot:'btn'
  },
];
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    btn: 'confirm',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    btn: 'confirm',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    btn: 'confirm',
  },
]

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

方式二（自定义## Attributes继承）

//BaseTable.vue

<template>
  <el-table v-bind="$attrs.table">
    <el-table-column v-for="(col,index) in $attrs.config" :key="index" v-bind="col">
      <template v-if="col.slot" #default="scope" >
        <slot :name="col.slot" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
defineOptions({
  inheritAttrs: false
})
</script>
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//index.vue

<template>
  <BaseTable v-bind="config">
    <template #btn="{ row }">
      <el-button type="primary">{{ row.btn }}</el-button>
    </template>
  </BaseTable>
</template>

<script lang="ts" setup>
import BaseTable from './BaseTable2.vue'
const config={
  table:{
    data: [
      {
        date: '2016-05-03',
        name: 'Tom',
        btn: 'confirm',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        btn: 'confirm',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        btn: 'confirm',
      },
    ],
    style:{width:'500px'}
  },
  config:[
    {
      type:'selection'
    },
    {
      prop: 'date',
      label:'Date',
      width:'180'
    },
    {
      prop: 'name',
      label:'Name',
    },
    {
      prop: 'btn',
      label:'action',
      slot:'btn'
    },
  ]
}
</script>
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

方式三（Attributes继承）

//BaseTable.vue

<template>
  <el-table>
    <el-table-column v-for="(col,index) in $attrs.config" :key="index" v-bind="col">
      <template v-if="col.slot" #default="scope" >
        <slot :name="col.slot" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
</script>

1
2
3
4
5
6
7
8
9
10
11
12

//index.vue

<template>
  <BaseTable :config="config" :data="tableData" :style="{width:'500px'}">
    <template #btn="{row}">
      <el-button type="primary">{{ row.btn }}</el-button>
    </template>
  </BaseTable>
</template>

<script lang="ts" setup>
import BaseTable from './BaseTable.vue'
const config=[
  {
    type:'selection'
  },
  {
    prop: 'date',
    label:'Date',
    width:'180'
  },
  {
    prop: 'name',
    label:'Name',
  },
  {
    prop: 'btn',
    label:'action',
    slot:'btn'
  },
];
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    btn: 'confirm',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    btn: 'confirm',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    btn: 'confirm',
  },
]
</script>
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