antdVue 自定义table列配置

news2024/12/23 22:06:02

最近做项目的时候需要对页面的table进行列配置的需求

在这里插入图片描述
子组件

<div>
        <a-modal
        title="列配置" 
        :visible="visible" 
        :closable="false" :footer="null"
        width="800px" height="448px"
        >
            <div>
                <a-row>
                    <a-col :span="18" style="padding: 0 10px 0 0;">
                        <a-table style="height: 400px"  
                        :columns="columns" ref="alarmTable"
                        :customRow="customRow" 
                        :data-source="tabkeData" :pagination="false">
                            <span slot="showOrhide" slot-scope="text, record">
                                <img src="@/assets/column/Vector-1.png" alt="" v-if="record.isHide" style="width:15px">
                                <img src="@/assets/column/Vector.png" alt="" v-else style="width:15px">
                            </span>
                            
                        </a-table>
                    </a-col>
                    <a-col :span="6">
                        <div class="btns" @click="upColumn"><img src="@/assets/column/Group.png" alt="" class="icon">上移</div>
                        <div class="btns" @click="downColumn"><img src="@/assets/column/Group-1.png" alt="" class="icon">下移</div>
                        <div class="btns" @click="showOrhide"><img src="@/assets/column/Group-2.png" alt="" class="icon">显示/隐藏</div>
                        <div class="btns" @click="showWidth"><img src="@/assets/column/Vector-2.png" alt="" class="icon">修改列宽</div>
                        <div class="btns" @click="showTitle"><img src="@/assets/column/Vector-2.png" alt="" class="icon">修改标题</div>
                        <div class="btns" @click="coverData"><img src="@/assets/column/Vector-3.png" alt="" class="icon">还原默认值</div>
                        <div class="btns" @click="saveColumn" style="margin-top: 50px;"><img src="@/assets/column/Vector-4.png" alt="" class="icon">保存</div>
                        <div class="btns" @click="handleCancel"><img src="@/assets/column/Vector-5.png" alt="" class="icon">关闭</div>
                    </a-col>
                </a-row>
            </div>
        </a-modal>
        <a-modal v-model="widthModel" title="设置列宽" @ok="saveWidth">
            <div>
                <a-input 
                    type="number" 
                    onmousewheel="return false" 
                    placeholder="请输入列宽" 
                    style="width: 200px;" 
                    onkeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
                    v-model="wData"/>
            </div>
        </a-modal>
        <a-modal v-model="titleModel" title="设置标题" @ok="saveTitle"> 
            <div>
                <a-input placeholder="请输入标题" style="width: 200px;" v-model="tData"/>
            </div>
        </a-modal>
    </div>

<script>
const columns = [
    {
        title:'序号',
        dataIndex: 'seq',
        key:'seq'
    },
    {
        title: 'ID',
        dataIndex: 'dataIndex',
        key: 'dataIndex',
    },
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '列宽',
        dataIndex: 'width',
        key: 'width',
    },
    {
        title: '显示',
        key: 'isHide',
        scopedSlots: { customRender: 'showOrhide' },
    },
]
export default{
    props:{
        configShow:{
            type:Boolean,
            default:true
        },
        data:{
            type:Array,
            default:true
        },
        menuId:{
            type:String,
            default:true
        },
        columnsLocal:{
            type:Array,
            default:true
        }
    },
    data(){
        return{
            visible:false,
            selectedRowKeys:[],
            tabkeData:[],
            columns,
            c_index:'',
            widthModel:false,
            wData:'',
            titleModel:false,
            tData:'',
            default:[]//默认table
        }
    },
    created(){
        this.columnQuery();
    },
    // 挂载后
    activated() {
        // console.log('jinlai');
        // this.columnQuery();
    },
    watch:{
        configShow(val){
            this.visible = val
        },
        data(val){
          // this.tableData = val;
        }
    },
    methods:{
        showWidth(){
            this.wData = this.tabkeData[this.c_index].width;
            this.widthModel = true
        },
        saveWidth(){
            //判断是否位0
            if(this.wData == 0){
                this.$message.error('不能为0！')
                return 
            }
            if(this.wData < 50){
                this.$message.error('不能小于50！')
                return 
            }
            if(this.wData == ''){
                this.$message.error('不能为空！')
                return 
            }
            this.$set(this.tabkeData[this.c_index],'width',parseInt(this.wData));
            this.widthModel = false;
        },
        showTitle(){
            this.tData = this.tabkeData[this.c_index].title;
            this.titleModel = true;
        },
        saveTitle(){
            if(this.tData == ''){
                this.$message.error('标题不能为空！')
                return
            }
            this.$set(this.tabkeData[this.c_index],'title',this.tData);
            this.titleModel = false;
        },
        customRow(record, index){
            return {
                style: {
                    'background-color': this.c_index=== index ? '#Bae2d8' : ''
                },
                on: {
                    click: event => {
                        this.c_index = index
                    }
                }
            }
        },
        handleCancel(){
            this.$emit('configCancle',false)
        },
        coverData(){
            this.tabkeData = this.resetData(this.columnsLocal);
            window.location.href = window.location.href
        },
        isLastIndex(){
            return this.c_index === this.tabkeData.length - 1 || this.c_index === 0;
        },
        isFirstIndex(){
            return this.c_index === 0 || this.c_index === 1
        },
        upColumn(){
            let tag = this.isFirstIndex();
            if(tag){
                this.$message.error('不能再操作啦！')
            }else{
                let index = this.c_index;
                let editColumn = this.tabkeData;
                let t = editColumn[index];
                editColumn[index] = editColumn[index-1];
                editColumn[index-1] = t;
                editColumn[index].seq = index+1;
                editColumn[index-1].seq = index;
                this.c_index = index-1;
                this.$delete(this.tabkeData, 'editColumn')
                this.$set(this.tabkeData,'editColumn',editColumn);
            }
        },
        downColumn(){
            let tag = this.isLastIndex();
            if(tag){
                this.$message.error('不能再操作啦！')
            }else{
                let index = this.c_index;
                let editColumn = this.tabkeData;
                let t = editColumn[index];
                editColumn[index] = editColumn[index+1];
                editColumn[index+1] = t;
                editColumn[index].seq = index+1;
                editColumn[index+1].seq = index+2;
                this.c_index = index+1;
                this.$delete(this.tabkeData, 'editColumn')
                this.$set(this.tabkeData,'editColumn',editColumn);
            }
        },
        showOrhide(){
            let idx = this.c_index;
            let hide = this.tabkeData[this.c_index].isHide
            if(idx<=1&&hide==false){
                this.$message.error('无法隐藏！')
                return
            }
            this.tabkeData[idx].isHide = !hide;
        },
        async saveColumn(){
            let col = this.tabkeData;
            col.map((item,index) => {
                if(item.scopedSlots){item.scopedSlots = JSON.stringify(item.scopedSlots)}
            })
            let res = await this.axios.post(
                'base/v1/masterData/tableColumn/save',
                {
                    userId: this.$store.state.user.id,
                    menuId: this.menuId,
                    columns:col
                }
            )
            if(res.data.code == 1){
                this.$message.success('保存成功！');
                this.tabkeData.map(k=>{
                    if(k.scopedSlots){
                        k.scopedSlots = JSON.parse(k.scopedSlots)
                    }else{
                        delete k.scopedSlots
                    }
                })
                this.$emit('configCancle',false);
                this.$emit('cover',[]);
                window.location.href = window.location.href
                this.$emit('cover', this.tabkeData.filter(i=>{return i.isHide==false}));
            }else{
                this.$message.error(res.data.messageDetail)
            }
        },
        async columnQuery(){
            //获取当前菜单的列配置 如果没有 那么默认取当前页面的 如果有那么覆盖
            this.axios.post(
            'xxxxxx'/xxxxxxx/xxxxxx',
            {
                "userId": this.$store.state.user.id,
                "menuId": this.menuId
            }
            ).then(res => {
                if(res.data.code == 1){
                    if(res.data.result.length>0){
                        res.data.result.map((item,index) => {
                            //覆盖本地列配置
                            item.key = item.dataIndex
                            if(item.scopedSlots){
                                item.scopedSlots = JSON.parse(item.scopedSlots)
                                console.log(item.scopedSlots,'scopedSlots');
                            }else{
                                delete item.scopedSlots
                            }
                        })
                        this.tabkeData = res.data.result;
                        console.log( res.data.result,'result');
                        this.$emit('cover', res.data.result.filter(i=>{return i.isHide==false}));
                    }else{
                        //没有查询到数据那么判定当前没有配置过 所以第一次是取本地的数据
                        //this.tableData = this.data
                        console.log(this.columnsLocal,'this.columnsLocal---')
                        let c_ary = this.resetData(this.columnsLocal);
                        this.tabkeData = c_ary;
                        this.$emit('cover', this.tabkeData.filter(i=>{return i.isHide==false}));
                        //在本地保存一套默认的table
                        // this.default = c_ary
                    }
                }
            })
        },
        resetData(e){
            let newAry = []
            e.map((item,index) => {
                let obj = {
                    align:item.align||'',
                    authority:item.authority||'',
                    dataIndex:item.dataIndex||item.key,
                    title:item.title,
                    ellipsis:true,
                    isFixed:false,
                    is_Default:true,
                    isHide:false,
                    seq:index+1,
                    width:item.width,
                    remark:item.remark||'',
                    key:item.key||item.dataIndex
                }
                if(item.scopedSlots){
                    obj.scopedSlots = {"customRender":obj.dataIndex}
                }
                newAry.push(obj)
            })
            return newAry;
        }
    }
}
</script>

子组件的有一部分代码应该是不必要的 遇到的难题是在于子组件数据更新了之后父组件数据更新了但是拖拽的功能没办法同时更新渲染 最后发现如果需要同时更新视图的话 是需要用到this.$set这个办法的 set方法没办法整个数组都更新 所以最后循环遍历更新 不知道有没有更好的办法 如果有 可以留言告诉我 谢谢～

父组件引用

<columnConfig 
   :configShow="configShow" 
   :data="columns" :columnsLocal="columnsLocal"
   :menuId="menuId" 
   @configCancle="(e)=>{configShow=e}" 
   @cover="coverData">
 </columnConfig>

configShow 定义弹框隐藏显示 columns传给子组件table的列配置数据 columnsLocal本地的列配置数据 初始化的时候会查询这个菜单是否有进行列配置过 如果没有那么就取本地的列配置 menuId 菜单id

customRow 这个方法也可以操作列配置显示隐藏 但是会有一个问题 确实是把head隐藏了 但是隐藏了之后原有的head还是会占位子 没有那么灵活 所以不建议用这个办法

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1648713.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多C段的美国站群服务器有什么用途?

多C段的美国站群服务器有什么用途?

多C段的美国站群服务器有什么用途? 多C段的美国站群服务器是一种常见的网络运营策略&#xff0c;其用途主要体现在以下几个方面&#xff1a; 多C段的美国站群服务器有什么用途? 1. 提高站点排名和流量 部署多个站点在不同的C段IP地址上&#xff0c;可以通过不同的IP地址发布…
阅读更多...
linux - 主次设备号自动申请

linux - 主次设备号自动申请

alloc_chrdev_region 原型如下&#xff0c;该函数向内核申请一个空闲的主设备号。 alloc_chrdev_region(&g_aputriger_dev, 0, APUTRIGER_MAX_NUM, "aputriger0"); 第四个参数是我们使用cat /proc/devices 看到的名称 /*** alloc_chrdev_region() - register a…
阅读更多...
外包干了2年，人都要废了。。。

外包干了2年，人都要废了。。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 简单的说下&#xff0c;我大学的一个同学&#xff0c;毕业后我自…
阅读更多...
程序员技术文档编写神器Typora【图文详情】

程序员技术文档编写神器Typora【图文详情】

文章目录 前言一、Typora是什么&#xff1f;二、如何安装三、如何使用总结 前言 在软件项目开发过程中&#xff0c;需要进行开发设计&#xff0c;编写相关的开发设计文档&#xff0c;本文介绍一下编写开发设计文档的神器Typora。 一、Typora是什么&#xff1f; Typora 是一款…
阅读更多...
SinoDB数据库导入导出工具External table

SinoDB数据库导入导出工具External table

External table又叫SinoDB外部表&#xff0c;外部表采用多线程机制&#xff0c;支持多线程读取、写入数据文件以及多线程数据转换、插入操作。多线程机制只需要消耗相对较少的系统资源&#xff0c;但是能提供高速数据导入、导出&#xff0c;可以应用在数据采集、表重建、数据库…
阅读更多...
04-xss获取cookie实验

04-xss获取cookie实验

二、开发XSS服务器端 1、确认实验环境 攻击者服务器&#xff1a;192.168.74.134&#xff0c;将获取到cookie数据保存到该服务器的数据库中&#xff0c;运行PHP代码暴露一个接收Cookie的URL地址。 正常Web服务器&#xff1a;192.168.74.133&#xff0c;用于正常的用户访问的目…
阅读更多...
java编程中，实现分页对象的类型转换

java编程中，实现分页对象的类型转换

一、背景 当数据库分页查询返回的对象与接口要返回的对象类型不一致时&#xff0c;不可避免需要进行类型转换。 示例&#xff1a;数据库分页查询返回的对象是PageDTO&#xff0c;而接口返回的对象类型是PageVO。 PageDTO Data public class PageDTO<T> {/*** Current…
阅读更多...
Android 巧用putBinder方法传递大文件

Android 巧用putBinder方法传递大文件

使用Intent传递数据大家都知道&#xff0c;但是如果你使用Intent传递大于1Mb的数据时&#xff0c;就一定会报如下的错误&#xff1a; Caused by: android.os.TransactionTooLargeException: data parcel size 1049112 bytes 就是说你的传输数据太大了&#xff0c;当前的大小达…
阅读更多...
【C++】滑动窗口：将x减到0的最小操作数

【C++】滑动窗口：将x减到0的最小操作数

1.题目 2.算法思路 这个题目难在要转化一下才能用滑动窗口。 题意是需要在数组的前后两段区间进行解题&#xff0c;但同时对两段区间进行操作是比较困难的&#xff0c;我们可以将中间这段区间只和与nums_sum-x&#xff08;数组总和-x&#xff09;进行比较&#xff0c;这样就可…
阅读更多...
数据库（MySQL）—— DML语句

数据库（MySQL）—— DML语句

数据库&#xff08;MySQL&#xff09;—— DML语句 什么是DML语句添加数据给全部字段添加数据批量添加数据 修改数据删除数据 什么是DML语句 在MySQL中&#xff0c;DML&#xff08;Data Manipulation Language&#xff0c;数据操纵语言&#xff09;语句主要用于对数据库中的数…
阅读更多...
Django 4.x 智能分页get_elided_page_range

Django 4.x 智能分页get_elided_page_range

Django智能分页 分页效果 第1页的效果 第10页的效果 带输入框的效果 主要函数 # 参数解释 # number: 当前页码&#xff0c;默认&#xff1a;1 # on_each_side&#xff1a;当前页码前后显示几页&#xff0c;默认&#xff1a;3 # on_ends&#xff1a;首尾固定显示几页&#…
阅读更多...
观测云 VS ELK：谁是日志监控的王者？

观测云 VS ELK：谁是日志监控的王者？

前言 作为 IT 信息系统运行状态感知和故障分析的重要手段&#xff0c;日志在行业兴起之初便为运维和开发环节所广泛应用。当应用和系统发生故障或出现问题时&#xff0c;日志数据成为了排查和诊断问题的重要依据。通过分析日志&#xff0c;开发人员和运维人员可以了解系统的运…
阅读更多...
麦肯锡精英高效阅读法笔记

麦肯锡精英高效阅读法笔记

系列文章目录 如何有效阅读一本书笔记 读懂一本书笔记 麦肯锡精英高效阅读法笔记 文章目录 系列文章目录序章　无法读书的5个理由无法读书的理由① 忙于工作&#xff0c;没时间读书无法读书的理由② 不知应该读什么无法读书的理由③ 没读完的书不断增多无法读书的理由④ 工作繁…
阅读更多...
论文复现和点评《基于随机森林模型的个人信用风险评估研究》

论文复现和点评《基于随机森林模型的个人信用风险评估研究》

作者Toby&#xff0c;来源公众号&#xff1a;Python风控模型&#xff0c;论文复现和点评《基于随机森林模型的个人信用风险评估研究》 最近Toby老师看到一篇论文热度比较高&#xff0c;下载量有665次&#xff0c;论文标题是《基于随机森林模型的 个人信用风险评估研究》 论文篇…
阅读更多...
C++ | Date 日期类详解

C++ | Date 日期类详解

目录 简介 日期类总代码 | Date 类的定义 & 构造 & Print 类的定义 构造函数 & Print 比较类&#xff0c;如<、>、<...... 值加减类&#xff0c;如、-、、-...... 加减类具体分类 判断某个月有多少天 GetMonthDay 日期类 / &#xff08;- / -&…
阅读更多...
运行一个jar包

运行一个jar包

目录 传送门前言一、Window环境二、Linux环境1、第一步&#xff1a;环境配置好&#xff0c;安装好jdk2、第二步&#xff1a;打包jar包并上传到Linux服务器3、第三步&#xff1a;运行jar包 三、docker环境1、Linux下安装docker和docker compose2、Dockerfile方式一运行jar包2.1、…
阅读更多...
光伏SRM供应商管理解决方案

光伏SRM供应商管理解决方案

供应商管理是光伏企业中重要的一环&#xff0c;通过SRM管理供应商&#xff0c;可以提高产品质量&#xff0c;降低采购成本&#xff0c;并集成供应链&#xff0c;提高核心竞争力。 一、搭建管理系统 分为供应商和商户&#xff0c;供应商需要完善基本信息、类别、等级、产品概要…
阅读更多...
二叉树详细介绍与代码生成遍历

二叉树详细介绍与代码生成遍历

目录 树的概念及其结构树的构造——代码表示 二叉树概念及介绍二叉树的存储结构二叉树的顺序结构二叉树的链式结构链表的代码展示堆的基本概念和结构堆的代码体现二叉树生成二叉树遍历 四种不同遍历方式——代码展示 树的概念及其结构 要了解二叉树&#xff0c;那么首要的就是…
阅读更多...
Linux系统编程 —— 进程概念，环境变量，虚拟地址空间总结（收藏向）

Linux系统编程 —— 进程概念，环境变量，虚拟地址空间总结（收藏向）

目录 一&#xff0c;什么是进程&#xff0c;有什么用&#xff1f; 1.1 关于进程 1.2 进程的重要特性 二&#xff0c;进程的描述&#xff1a;PCB结构体 2.1 关于PCB 2.2 task_struct 三&#xff0c;进程pid与ppid 3.1 pid是什么&#xff1f;怎么查看&#xff1f; 3.2 系…
阅读更多...
51单片机入门：蜂鸣器

51单片机入门：蜂鸣器

蜂鸣器介绍 蜂鸣器是一种将电信号转换为声音信号的器件&#xff0c;常用来产生设备的按键音、报警音等提示信号。 蜂鸣器的种类 1、从结构上&#xff1a;压电式蜂鸣器和电磁式蜂鸣器。 压电式蜂鸣器&#xff1a;通过压电陶瓷的压电效应原理工作的。当加有交变电压时&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023