el-table动态合并单元格~隔行变色~自定义列索引等功能

已于 2023-07-27 15:50:54 修改
阅读量591 收藏 2
点赞数
分类专栏： element-ui 前端 文章标签： vue.js javascript elementui
于 2023-07-27 15:42:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35888841/article/details/131961760
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<style>
    body {
        background: #EEEFF3;
        font-family: "思源黑体", "Microsoft YaHei" !important;
    }

    .page-title {
        display: none;
    }

    .block {
        background: #F3F4F8;
        border-radius: 10px;
        padding: 16px 15px;
        margin: 10px;
    }

    .el-table {
        background: #F3F4F8;
        border: none;
    }

    .el-table--border::after, .el-table--group::after {
        width: 0px;
    }

    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
        border-right: 1px solid #fff;
    }

    .el-table td, .el-table th.is-leaf {
        border-bottom: 1px solid #ffffff;
    }

    .el-table th {
        font-size: 13px;
        font-weight: 400;
        color: #FFFFFF;
        padding: 0px 0px;
        /*border-left: 1px solid #ffffff;*/
        display: table-cell !important;
    }

    .el-table th:last-child {
        border-right: 1px solid #ffffff;
    }

    .el-table td:last-child {
        border-right: 1px solid #ffffff;
    }

    .el-table td {
        padding: 0px 0px;
        font-size: 13px;
        font-weight: 400;
        color: #000000;
        /*border-left: 1px solid #ffffff;*/
    }

    #header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    #header .header-title .title {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        margin-right: 10px;
    }

    #header .header-title {
        margin-right: 10px;
    }

    #header .header-l {
        display: flex;
    }

    #header .el-select .el-input__icon {
        line-height: 32px !important;
    }

    #header .el-range-input {
        margin-top: 2px;
    }

    #header .el-input, .el-input__inner {
        margin-top: 2px;
        width: 160px !important;
        height: 35px !important;
        font-size: 14px;
    }

    #header .header-r {
        display: flex;
        align-items: center;
    }

    #header .el-date-editor--daterange {
        width: 240px !important;
        font-size: 14px;
    }

    #header .el-date-editor .el-range-separator {
        padding: 0 5px;
        line-height: 32px;
        width: 12%;
        color: #303133;
    }

    .btn_ {
        cursor: pointer;
        width: 70px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 32px;
        text-align: center;
        margin-right: 20px;
        margin-left: 10px;
    }

    .btn_dc {
        cursor: pointer;
        padding: 0px 15px;
        height: 32px;
        background: #0E69BE;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tov_1 {
        text-align: right;
        padding-right: 0px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .el-table th > .cell {
        padding: 4px 4px;
    }

    .el-table td > .cell {
        padding: 4px 4px;

    }

    .el-table tbody tr:hover > td {
        background-color: #a29d9d2b !important;
    }

    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        background-color: #a29d9d2b !important;
    }

    .el-table__fixed-right tbody tr:hover > td {
        background-color: #a29d9d2b !important;
    }

    .el-table__row--striped {
        background: #F3F4F8 !important;
    }

    .el-table__row {
        background: #F3F4F8 !important;
    }

    td .el-input__inner {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border: none;
        margin-top: 5px;
        background: #eff0f529;
        width: 90% !important
    }
    td .el-input__inner:hover{
        border-color: #fff !important;
        background: #fff !important;
    }
    .row_striped {
        background: #EFF0F5 !important;
    }
    .row_fh{
        background: #E4EEFF !important;
    }
    td i{
        color: #838487;
        cursor: pointer;
    }
    td a:nth-child(1){
        margin-right: 15px;
        cursor: pointer;
    }
    td a{
        cursor: pointer;
    }
    .el-dialog__body  .el-input__inner{
        width: 100% !important;
    }
</style>
<div id="app">
    <template>
        <div class="block">
            <div id="header">
                <div class="header-l">
                    <div class="header-title">
                        <span class="title">分货信息</span>

                    </div>


                </div>
                <div class="header-r">
                    <div class="btn_dc" @click="titleVisible=true">
                        新增主题
                    </div>
                </div>
            </div>
            <template>
                <el-table
                        v-loading="loading"
                        class="flex-table"
                        :data="allData"

                        :height="clienHeight"
                        :stripe="false"
                        :key="itemKey"
                        ref="containerTable"
                        style="width: 100%;margin-top: 10px"
                        :span-method="objectSpanMethod"
                        :header-cell-style="getRowClass"
                        :row-class-name="rowStyle"
                        :cell-style="columnStyle"

                >
                    <el-table-column
                            label="编号"
                            align="center"
                    >
                        <template slot-scope="scope">
                            {{scope.row.index}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="380"
                            align="center"
                            prop="title"
                            label="主题名称">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.title"
                                      placeholder="" @blur="blurTitle(scope.$index,scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="分货">
                        <el-table-column
                                align="center"
                                prop="sys_date"
                                label="创建日期">

                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="session_id"
                                label="批次编号">

                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="status"
                                label="状态">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作">
                            <template slot-scope="scope">
                                    <i class="el-icon-delete" @click="onDelOne(scope.$index)"></i>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作">
                            <template slot-scope="scope">
                                <a>分货</a>
                                <a @click="onDelAll(scope.row.id)">删除</a>
                            </template>
                        </el-table-column>
                    </el-table-column>

                </el-table>

            </template>
            <el-dialog title="新增主题" :visible.sync="titleVisible" width="35%"  :modal-append-to-body="false" :close-on-click-modal="false" >
                <el-input v-model="title"   placeholder="请输入主题"  ></el-input>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="titleVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onAdd">确 定</el-button>
                </div>

            </el-dialog>

        </div>


    </template>


</div>

</body>
<!-- import Vue before Element -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/element.js"></script>
<!-- import JavaScript -->
<script src="/js/echarts.8.min.js"></script>
<script>
    //    主题id：id
    //主题名称：title
    //创建日期：sys_date
    //批次编号：session_id
    //状态：status
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                loading: false,//是否加载
                itemKey: '0',//表格key
                allData: [{id: '1', title: '测试', sys_date: '2023-09-09', session_id: '11', status: '的士速递',fh:1},
                    {id: '1', title: '测试', sys_date: '2023-09-09', session_id: '11', status: '的士速递'},
                    {id: '2', title: '测试', sys_date: '2023-09-09', session_id: '11', status: '的士速递'},
                    {id: '3', title: '测试', sys_date: '2023-09-09', session_id: '11', status: '的士速递',fh:1},
                    {id: '3', title: '测试', sys_date: '2023-09-09', session_id: '11', status: '的士速递',fh:1},
                    {id: '4', title: '测试', sys_date: '2023-09-09', session_id: '11', status: '的士速递',fh:1}],//表格数据
                clienHeight: '80vh',//表格高度
                spanArr:[],//表格存放需要合并行数的数组
                titleVisible:false,//添加弹框标题是否显示
                title:'',//标题



            }
        },
        created() {
            // this.getData();

            this.resetID();//重置编号方法
            this.reachData(this.allData)//合并方法
        },
        mounted() {

        },
        methods: {
            //重置编号
            resetID(){
                var newArr_=this.allData.map((v)=> v.id);
                var newArr = newArr_.filter(function(item,index){
                    return newArr_.indexOf(item) === index;  // 因为indexOf 只能查找到第一个
                });
                for (let j=0;j<newArr.length;j++){
                    for (let i = 0; i <this.allData.length; i++) {
                        if (this.allData[i].id==newArr[j]){
                            this.allData[i].index=j+1;
                        }
                    }
                }
            },
            blurTitle() {

            },
            //删除单个记录
            onDelOne(index){
                this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.allData.splice(index,1)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.resetID();
                    this.reachData(this.allData)
                }).catch(() => {

                });

            },
            //删除全部主题
            onDelAll(id){
                this.$confirm('此操作将删除该主题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var arr=new Array();
                    for (let i = 0; i <this.allData.length; i++) {
                        if (this.allData[i].id==id){
                            console.log("删除");
                        }else {
                            arr.push(this.allData[i])

                        }

                    }
                    this.allData=arr;
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.resetID();
                    this.reachData(this.allData)
                }).catch(() => {

                });
            },
            //添加主题
            onAdd() {
                if (this.title==""){
                    this.$message({
                        message: '主题必填，不能为空',
                        type: 'warning'
                    });

                    return false;
                }

                this.allData.unshift({id:Math.random(), title:this.title, sys_date: '', session_id: '', status: ''})
                this.resetID();
                this.reachData(this.allData)
                this.titleVisible=false;
                this.title="";


            },
            // 给某一行添加背景色class
            rowStyle({ row, rowIndex }) {

                // 如果当前行有添加的className，就添加背景色
                if (row.rowColor === 'row_striped') {
                    return 'row_striped'
                }
                else {
                    return ''
                }
            },
            // 改变Table某一列的背景颜色
            columnStyle({ row, column, rowIndex, columnIndex }) {
                if (columnIndex == 2||columnIndex == 3||columnIndex == 4||columnIndex == 5) {
                    if (row.fh==1){
                        //让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）
                        return 'background:#E4EEFF;'
                    }

                }
            },
            reachData(allData) {
                //创建一个存放需要合并行数的数组
                this.spanArr = [1]
                let list = JSON.parse(JSON.stringify(allData))
                if (list.length) {
                    list.forEach((row, i) => {
                        row.lastRecordSynctime = 0
                        row.rowColor = ''
                    })
                }
                let pos = 0;
                list.reduce((old, cur, i) => {
                    // old 上一个元素  cur 当前元素  i 索引
                    if (i === 0) {
                        pos = 0
                    } else {
                        // 如果两条数据的lastRecordSynctime相等就把他们合并
                        let oneStr = cur.id
                        let twoStr = old.id
                        if (oneStr === twoStr) {
                            cur.rowColor = 'row_striped'
                            old.rowColor = 'row_striped'
                            this.spanArr[pos] += 1
                            this.spanArr.push(0)
                        } else {
                            this.spanArr.push(1)
                            pos = i
                        }
                    }
                    return cur
                }, {})

                this.allData = list
                // 洗好的列表数据
                console.log('======列表数据======', this.allData)
                //按照element地方法创建的数组spanArr
                console.log('======spanArr======', this.spanArr)
            },
            // 调用elment提供的方法合并单元格
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                //设置第几列合并columnIndex =1是第一列
                if (columnIndex === 0 || columnIndex === 1 || columnIndex === 6) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        // [0,0] 表示这一行不显示， [2,1]表示行的合并数
                        rowspan: _row,
                        colspan: _col
                    };
                }
            },
            getData() {
                this.loading = true;
                var json = {
                    sys_date: this.sys_date,
                    item_cd: this.item_cd,
                    computer_start_date: this.computer_date[0],
                    computer_end_date: this.computer_date[1]
                }
                $.get("/br-fh-result/summary-data--", json, (res) => {
                    res = JSON.parse(res)
                    if (res.code === 200) {
                        this.loading = false;
                        this.allData = res.data.data;
                        this.options = res.data.item_data;
                        this.clienHeight = '80vh'
                        console.log(this.clienHeight)
                    }

                })

            },
            //设置表头的颜色
            getRowClass({row, column, rowIndex, columnIndex}) {
                if (column.label == "分货") {
                    return 'background:#77A6D1 !important;'

                } else {
                    return 'background:#558FC5 !important;'

                }

            },



        },
    })
</script>
</html>

在这里插入图片描述

萌萌1126_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
razor table分页、隔行变色 table_pages_color_demo
09-24
将数据库查询出的内容，通过页面中的TABLE进行分页，并隔行变色！
el-table树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
el-table 自定义隔行变色
localhost
05-13 959
主要实现的原理是利用每行的下标来实现单，偶区分，添加不同的样式。
vue element 怎样去除页面的隔行变色
xiaodanda的博客
08-05 642
vue element 怎样去除页面的隔行变色
element全局table  隔行换色
u011155153的专栏
05-25 1780
/*用来设置当前页面element全局table隔行换色*/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td{ background-color:#ebeef5;/*替换为你需要的颜色，觉得优先级不够就加!important*/ } ...
el-table自动滚动&el-table样式&鼠标悬停&隔行换色
qq_43557302的博客
08-25 1299
【代码】el-table自动滚动&el-table样式&鼠标悬停&隔行换色。
element-ui table隔行变色
H2659541076的博客
05-16 826
element-ui table隔行变色
Element UI表格隔行变色
qq_44158162的博客
12-01 7515
表格隔行变色有两种方式 第一种，我们给表格设置“stripe”属性 <el-table :data="tableWarningData" style="width: 100%" :header-cell-style="{ color: '#1572e9' }" stripe :cell-style="changeCellStyle"> 然后在style里面写下如下代码 .el..
vue修改Element的el-table样式的4种方法
10-14
然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 1. **row-style** 这个属性允许你为表格的每一行设置样式。它可以是一个返回CSS...
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认或进行提示。引申开来，即可在打开选择文件弹框之前，做一系列操作。 实现思路在基于element-upload组件的基础上，再加一个按
element-ui table行点击获取行索引（index）并利用索引更换行顺序
12-28
1)将每一行的索引插入操作行中，即为每一行数据添加一个属性index 使用el-table已经给处的方法：tableRowClassName html中： js中：只需放入methods中即可，el-table会自动触发(不知道为什么贴源码不行啊) 点击进行事件操作： 在el-table-column中加入slot,可以拿到当前点击列所属的行，并完成对其重新排列 js中： 到此这篇关于element-ui table行点击获取行索引（index）并利用索引更
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
HTML使用CSS实现表格隔行变色
weixin_70815247的博客
07-14 4252
HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
[element-ui] 修改table表格隔行变色 背景颜色透明 改hover颜色
qq_14993591的博客
03-24 3199
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background: #212936; /*隔行变色*/ } element-ui中 修改table表格隔行变色的样式
【Vue-Element-Admin】table添加自定义索引
最新发布
weixin_43840640的博客
11-03 982
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
改变el-table表头的背景颜色以及表格隔行变色
m0_73154039的博客
06-16 3666
1. 改变表头背景颜色（直接设置 header-cell-style）
Element ui表格隔行变色
热门推荐
unimpossibles的博客
04-28 1万+
官方文档给出一个stripe属性可以创建带斑马纹的表格 <el-table :stripe="true"> </el-table> //可以这样写 <el-table stripe"> </el-table> //可以直接这样写 这样创建出来的表格也有隔行效果但是不明显。 官方文档还给出了带状态的表格，通过row-class-name 属性来创建...
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
Sunny_lxm的博客
04-11 1205
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
vue el-table 实现索引值自增
weixin_45795183的博客
06-10 775
vue el-table 实现索引值自增
el-table 动态合并单元格
09-19
el-table可以通过设置`span-method`属性来实现动态合并单元格。`span-method`是一个方法，用于指定哪些单元格需要进行合并。在方法中，你可以根据具体的条件返回一个对象，该对象包含`rowspan`和`colspan`属性，分别...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值