基于element 封装一个简单的表格组件

已于 2022-11-16 17:36:47 修改
阅读量216 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js elementui 前端
于 2022-11-09 20:35:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49035434/article/details/127776690
版权 
<!--  子组件   -->
<!--  子组件   -->
<template>
    <div
        class="y_table"
        :class="{ y_table_moving: dragState.dragging }"
    >
        <el-table
            :data="data"
            resizable
            stripe
            size="small"
            :show-summary="option.showSummary"
            :height="option.height"
            :max-height="conheight.height"
            :border="option.border"
            :style="{ width:option.width }"
            :cell-class-name="cellClassName"
            :header-cell-class-name="headerCellClassName"
            :header-cell-style="{background:'#FAFAFA',}"
            @sort-change="handleSort"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                v-if="showSelection"
                align="center"
                type="selection"
                fixed="left"
                width="55"
            />
            <slot name="fixed"></slot>
            <template v-for="(col, index) in tableHeader">
                <!-- 操作列/自定义列 -->
                <slot
                    v-if="col.slot"
                    :name="col.slot"
                ></slot>
                <!-- 普通列 -->
                <el-table-column
                    v-else
                    :key="index"
                    :sortable="col.sortable"
                    :prop="col.prop"
                    :fixed="col.fixed"
                    :label="col.label"
                    :width="col.width"
                    :min-width="col.minWidth"
                    :type="col.type"
                    :align="col.align"
                    :header-align="col.headerAlign"
                    :column-key="index.toString()"
                    :sort-method="col.sortMethod"
                    :show-overflow-tooltip="true"
                />
            </template>
        </el-table>
        <el-pagination
            v-if="option.hidePagibation"
            class="pageination"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="
                option.sizes && option.sizes.length > 0 ? option.sizes : [10,20,40, 60, 80,100,200]
            "
            :page-size="option.size"
            :total="option.total"
            :current-page.sync="currentPage"
            @size-change="handlePageSize"
            @current-change="handlePageCurrent"
        />
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        showSelection: {
            type: Boolean,
            default: false,
        },
        header: {
            type: Array,
            default: () => [],
        },
        option: {
            default: () => { },
            type: Object,
        },
        cellClassName: {
            type: String,
            default: '',
        },
        headerCellClassName: {
            type: String,
            default: 'defaultBgc',
        },
    },
    data() {
        return {
            tableHeader: this.header,
            currentPage: 1,
            dragState: {
                start: -9, // 起始元素的 index
                end: -9, // 移动鼠标时所覆盖的元素 index
                dragging: false, // 是否正在拖动
                direction: undefined, // 拖动方向
            },
            conheight: {
                height: '',
            },
        };
    },
    watch: {
        header(val, oldVal) {
            this.tableHeader = val;
        },
    },
    created() {
        window.addEventListener('resize', this.getHeight);
        this.getHeight();
    },
    methods: {
        updateCurPage() {
            this.currentPage = 1;
        },
        getHeight() {
            this.conheight.height = `${window.innerHeight - 80}px`;
        },
        handlePageSize(e) {
            this.$emit('handlePageSize', e);
        },
        handlePageCurrent(e) {
            this.$emit('handlePageCurrent', e);
        },
        // 点击排序触发
        handleSort(e) {
            this.$emit('handleSort', e.order, e.prop);
        },
        // 多选的方法
        handleSelectionChange(e) {
            this.$emit('handleSelected', e);
        },
    },
};
</script>

  <style lang="scss" scoped>
  ::v-deep .el-table {
    border-top: 1px solid #dfe6ec !important;
  }
  .y_table {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    height: calc(100% - 13rem);
    .el-table .darg_start {
      background-color: #f3f3f3;
    }
    .defaultBnc {
      background-color: #f2f2f2;
    }
    .el-table th {
      padding: 0;
      .virtual {
        position: fixed;
        display: block;
        width: 0;
        height: 0;
        margin-left: -10px;
        background: none;
        border: none;
      }
      &.darg_active_left {
        .virtual {
          border-left: 2px dotted #666;
          z-index: 99;
        }
      }
      &.darg_active_right {
        .virtual {
          border-right: 2px dotted #666;
          z-index: 99;
        }
      }
    }
    .thead-cell {
      padding: 0;
      display: inline-flex;
      flex-direction: column;
      align-items: left;
      cursor: pointer;
      overflow: initial;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
    }
    &.y_table_moving {
      .el-table th .thead-cell {
        cursor: move !important;
      }
      .el-table__fixed {
        cursor: not-allowed;
      }
    }
  }
  </style>

父组件

<template>
    <div>
        <my-table
            :header="tableHeader"
            :data="tableData"
            :show-selection="showSelection"
            :option="tableOption"
            @handlePageSize="handlePageSize"
            @handlePageCurrent="handlePageCurrent"
            @handleSort="handleSort"
            @handleSelected="handleSelectionChanges"
        >
            <el-table-column
                slot="lesseeName"
                label="线索池名称"
                width="200px"
            >
                <template slot-scope="{row}">
                    <el-button
                        type="text"
                    >
                        {{ row.tableDataName }}
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column
                slot="set"
                label="操作"
                width="160px"
            >
                xxx
            </el-table-column>
        </my-table>
    </div>
</template>

<script>
import myTable from './WTable';

export default defineComponent({
    name: 'PriceUpsideDownTable',
    components: {
        myTable,
    },
    setup() {
        // 表头
        const tableHeader = [
            {
                type: 'index', // 从index开始的序号
            },
            {
                prop: 'mainSkuId', // 绑定的对应prop,就是要渲染的数据
                label: '主SKUID', // 绑定的对应label
                align: 'center', // 对齐方式
                headerAlign: 'left', // 表头对齐方式
                minWidth: 130, // 表格最新宽度
                sortable: true, // 是否可以排序
                fixed: 'right', // 是否固定,值是left,right
            }, {
                prop: 'skuId',
                label: 'SKUID',
                align: 'center',
            }, {
                prop: 'skuName',
                label: '商品名称',
                minWidth: 300,
            }, {
                prop: 'specZsFactor',
                label: '包规折算系数',
                align: 'center',
                minWidth: 160,

            }, {
                prop: 'creator',
                label: '创建人',
            }, {
                prop: 'ctime',
                label: '创建时间',
                minWidth: 200,
            }, {
                slot: 'lesseeName',
            },
        ];
        // 数据
        const tableData = [
            {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢1',
                skuName: 'xx1',
                mainSkuId: 1,
                skuId: 111,
                creator: '魏广雨',
                specZsFactor: '99',
                ctime: '2022-09-20',
            }, {
                tableDataName: '谢谢2',
                mainSkuId: 2,
                skuId: 222,
                skuName: 'xx2',
                specZsFactor: '33',
                creator: '魏广雨',
                ctime: '2022-09-20',
            },
        ];
        // 是否需要多选
        const showSelection = true;
        // 控制分页的
        const tableOption = {
            border: true, // 是否需要表格边框
            height: 'calc(100vh - 70px)', // 表格高度  我的除去表格其他的高度占70px,根据自己其他内容占的高度写
            showSummary: false, // 是否展示合计行
            hidePagibation: true, // 是否展示分页器
            total: 100, // 总条数
            size: 20, // 当前展示多少页
            currentPage: 1, // 当前页
        };
        // 每页显示多少个发生变化
        const handlePageSize = (v) => {
            console.log(v);
        };
        // 当前页发生变化
        const handlePageCurrent = (v) => {
            console.log(v);
        };
        // 排序发生变化,哪个选项点击了排序
        const handleSort = (ord) => {
            console.log(ord);
        };
        // 多选
        const handleSelectionChanges = (v) => {
            console.log(v);
        };

        return {
            tableHeader,
            tableData,
            showSelection,
            tableOption,
            handlePageSize,
            handlePageCurrent,
            handleSort,
            handleSelectionChanges,

        };
    },
});
</script>

下面的和封装表格无关------------------------------

表格合并

spanMethod方法
// skuId/商品信息列
if (column.property === 'skuId') {
const cellValue = row[column.property];
if (cellValue) {
// 上一条数据
const prevRow = tableDatas[rowIndex - 1];
// 下一条数据
let nextRow = tableDatas[rowIndex + 1];
// 上一条等于这条数据，这条数据不显示
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 };
} else { // 下一条数据等于这条数据，向下合并
let rowspan = 1;
while (nextRow && nextRow[column.property] === cellValue) {
rowspan += 1;
nextRow = tableDatas[rowspan + rowIndex];
}
return { rowspan, colspan: 1 };
}
}
}



// 也可以根据后端返回的数据格式自行处理,,仅个人看
// 获取表格数据
    const responseProcessor = (response) => {
        // 处理结构,返回新数组
        const newList = response.skuList.reduce((tol, cur) => {
            const { length } = cur.skuList;
            const arr = cur.skuList.map((item, index) => ({ ...item, ...cur, rowSpan: index === 0 ? length : 0 }));
            tol.push(...arr);
            return tol;
        }, []);
        const res = {
            data: newList || [],
            total: response?.total,
        };
        return res;
    };

    const spanMethod = ({ row, column }) => {
        // 需要合并的列
        const arr = ['manageCityName', 'mainSkuId', 'poiCount', 'startTime'];
        return [arr.includes(column.property) ? row.rowSpan : 1, 1];
    };

weixin_49035434
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Element封装一个表格组件tableList的使用方法
10-15
主要介绍了基于Element封装一个表格组件tableList的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+基于element-ui的表格封装组件
01-31
基于element-ui的表格封装组件，方便统一修改表格样式等
elementui el-table 封装表格
CMDN123456的博客
07-25 1721
el-table 封装表格
element 表格组件封装
weixin_48645836的博客
10-31 174
【代码】element 表格组件封装。
将element中的表格封装成组件
weixin_42928456的博客
01-13 1073
在vue + element的一些后台管理项目中表格分页是经常用到的，所以我在element的基础上，将表格和分页组封装成了一个组件。 表格子组件文件 <template> <div class="tableComponent"> <template v-if="tableInfo && tableInfo !== null"> ...
vue3 二次封装element-plus 表格组件
weixin_42083974的博客
01-27 3449
由于项目中会频繁的使用表格，会出现非常多的重复代码，所以决定对element-plus的table组件进行封装，尽量避免代码冗余。代码如下： 1.在components文件下新建Table/index.vue文件 <template> <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" fit border highlight-current-row :max-he
element vue 通用表格组件封装
weixin_43465396的博客
03-24 876
（3）标注一下tableMixin里引入的内容。（2）tableMixin内容如下。1.table.vue内容如下。2.全局引入（main.js）3.mixin公用方法配置。（1）新建mixin文件。
Egrid基于ElementUITable组件封装的高阶表格组件
08-07
基于 Element-UI Table 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementui 表格的简单封装
m0_51482205的博客
08-27 2032
element表格的封装
基于Element-Ui封装公共表格组件
灰海
09-22 2422
基于Element-Ui封装公共表格组件
element表格封装
长歌的博客
01-12 1682
经过百度和element官网指导以及个人努力，攒了个表格组件，目前适应系统的需求，发表一下，做个记录，因此，就不公开献丑了。 MyTable组件页面 <!-- MyTable组件 --> <template> <div class="myTable"> <el-table :data="tableData" border stripe style="width: 1
element 表格二次封装超详细 附代码（附表格插槽，头部插槽，单选多选，根据数据自动选择）
Yourlittlecutie的博客
05-19 838
element 表格二次封装超详细 附代码（附表格插槽，头部插槽，单选多选，根据数据自动选择）
基于element-ui中table表格组件进行二次封装
Demons_lq的博客
06-30 2418
eleTable组件的封装引入了element组件库中的组件，并使用了v-bind 和 v-on来进行对组件间的传参，可以把使用时不用处理的参数直接传递到引入的组件内部，保留组件的属性和功能。我们的表格一般还会有各种筛选条件，所以吧这些统一的查询和重置方法提出来成为一个mixins混合，在使用的组件里面引入（如果后端接口返回的数据比较统一，也可以将查询翻页等功能直接封装在表格组件中，根据业务需要封装）。在使用封装好的组件时，直接引入eleTable组件和mixins文件，并传入相应的数据和属性即可。
element-ui 封装 表格
最新发布
奇点的博客
11-11 512
element-ui 表格 很多地方用的都一样，可以封装一下，省一些代码
vue 简单实用的elementUI表格封装
Start2019
07-23 2721
只需要了解slot组件就可以了。例举了两种表格：普通表格的写法，带操作按钮的报个写法
element表格封装（直接使用）
RenBaiLi的博客
10-20 470
element表格封装（直接使用）
Vue3-Element表格组件（el-table）的简单封装
m0_54731428的博客
07-19 1405
饿了么表格组件el-table的简单封装，支持指定列自定义元素布局，待完善
基于vue+Element Table 表格的封装
Whit3ZzT的博客
06-23 522
项目场景：需要频繁使用列表进行呈现数据，不可能每次都写一个表格，可以将表格封装为一个组件，在需要使用时可以直接调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值