element的table的二次封装，操作列手动传入按钮

最新推荐文章于 2024-07-19 09:55:53 发布

紫竹的

最新推荐文章于 2024-07-19 09:55:53 发布

阅读量557

点赞数

分类专栏： element+table二次封装文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_32065391/article/details/110127481

版权

本文介绍了如何对ElementUI的Table组件进行二次封装，特别强调了如何手动传入操作列的按钮，以实现更灵活的表格功能。通过设置`dataSource`和`columns`，结合`v-for`循环展示表格数据，并在操作列中自定义按钮，实现高度定制化的表格操作。

摘要由CSDN通过智能技术生成

在这里插入代码片

//封装的table组件1、table.vue 表格组件dataSource为表格数据，columns为列表中属性的值
2
3
4 <el-table
5 :data=“dataSource”
:header-cell-style="{background:’#FAFAFA’}"
:row-style="{height:‘60px’}"
:cell-style="{padding:‘0px’}"
style=“width: 100%;border-collapse:collapse”
6 >
7 <el-table-column
8 v-for="(column, index) in columns"
9 header-align=“center”
10 v-if=“column.isShow”
11 :key=“column.prop”
12 :show-overflow-tooltip=“true”
13 :prop=“column.prop”
14 :label=“column.label”
15 :align=“column.align”
16 :width=“column.width”>
17
18
19 <el-table-column
20 label=“操作”
21 v-if=“isOperate”>
22
23
24
25
26
27
28
47

2、table组件的使用

<tables  :dataSource="dataSource" :columns="columns" :isOperate='true'>
         <template slot-scope="data">
                <el-button

                size="mini"
                type="primary"
                @click="attention(data.index, data.row)">互关</el-button>
                <el-button

                size="mini"
                type=