修改antdesginVue table表格自定义

已于 2023-03-23 12:00:31 修改
阅读量2k 收藏 2
点赞数 1
文章标签： html dreamweaver servlet Powered by 金山文档
于 2023-03-23 12:00:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q475476257/article/details/129727816
版权

直接在样式里面加会影响到其他页面

    //会影响到其他列表
    // .ant-table-thead>tr>th /deep/ {
    //     background-color: #722ED1 !important;
    //     color: #FFF !important
    // }

头部样式调整需要用到customHeaderCell 

            yd:
            {
                columns: [
                    {title: '检查类别',dataIndex: 'LB',key: 'LB',align: "center",customHeaderCell:this.customHeaderCellYf},
                    {title: '检查内容',dataIndex: 'RWMC',key: 'RWMC',align: "center",customHeaderCell:this.customHeaderCellYf,
                    customCell: () => {
                        return {
                            style: {
                                //可以定义样式
                                'text-align': 'left'
                            },
                        };
                    },
                    },
                    {title: '备注',dataIndex: 'BZ',key: 'BZ',align: "center",customHeaderCell:this.customHeaderCellYf},

                ],
                dataSource:[],      
            },


    //表头单元格样式
        customHeaderCellYf(){
            return {
                style: {
                    'background-color': '#722ED1',
                    color: '#FFF' 
                },
            }
        },

详细代码

<template>
    <div>
        <a-row :gutter="16" style="text-align: center;font-size:30px">
            <a-col :span="2" style="font-size:30px">
                <a-button type="primary" @click="NdjhSelect()" >
                    <template #icon><SearchOutlined /></template>
                    年度计划
                </a-button>
            </a-col>
            <a-col :span="22">
                <h1 >{{this.form.NDBT}}</h1>
            </a-col>
        </a-row>
        <a-table bordered
            :columns="nd.columns"
            :data-source="nd.dataSource"      
            :pagination="false"
            size="middle"   
            :customHeaderRow="customHeaderRowNd" 
            :customRow="customRowNd"
            :customCell="customCellNd"
            :scroll="{}"
        />
        <a-row :gutter="16" style="text-align: center;font-size:30px">
            <a-col :span="2" style="font-size:40px">
                <a-button type="primary" @click="YdjhSelect()" >
                    <template #icon><SearchOutlined /></template>
                    月度计划
                </a-button>
            </a-col>
            <a-col :span="22">
                <h1 style="text-align: center;font-size:30px;margin-top:20px">{{this.form.YDBT}}</h1>
            </a-col>
        </a-row>
        <a-table classname="bbbb" bordered
            :columns="yd.columns"
            :data-source="yd.dataSource"      
            :pagination="false"
            size="middle"   
            :customHeaderRow="customHeaderRowYf" 
            :customRow="customRowYf"
            :customHeaderCell="customHeaderCellYf"
            :scroll="{}"
            
        />
    </div>
</template>


<script>

const renderContent = (value) => {
    console.log("value11",value)
    const obj = {
        children: value,
        attrs: {},
    };
    if (value == undefined) {
        obj.attrs.colSpan = 0;
    }
        return obj;
    };

export default 
{
    data() {
        return {
            form:{
                NDBT:'',
                YDBT:'',
            },
            nd:
            {
                columns: [
                            {title: '检查类别',dataIndex: 'JCLBMC',key: 'JCLBMC',align: "center",customHeaderCell:this.customHeaderCellYf,
                            customRender: (text) => {
                                if (text != '合计') {
                                    return <a href="javascript:;">{text}</a>;
                                }
                                return {
                                    children: <a href="javascript:;">{text}</a>,
                                    attrs: {
                                        colSpan: 3,
                                    },
                                };
                            },},
                            {title: '检查内容',dataIndex: 'JCNR',key: 'JCNR',align: "center",customRender: renderContent,customHeaderCell:this.customHeaderCellYf,
                            customCell: () => {
                                return {
                                    style: {
                                        //可以定义样式
                                        'text-align': 'left'
                                    },
                                };
                            },
                            },
                            {title: '检查方式', dataIndex: 'JCFS',key: 'JCFS',align: "center",customRender: renderContent,customHeaderCell:this.customHeaderCellYf,},
                            {title: '检查频次',dataIndex: 'JCPC',key: 'JCPC',align: "center",customHeaderCell:this.customHeaderCellYf,},
                            {title: '检查情况',dataIndex: 'JCQK',key: 'JCQK',align: "center", customCell: this.renderTimeBackground,customHeaderCell:this.customHeaderCellYf,},
                            {title: '完成情况',dataIndex: 'WCQK',key: 'WCQK',align: "center",customHeaderCell:this.customHeaderCellYf,},
                            {title: '备注',dataIndex: 'BZ',key: 'BZ',align: "center",customHeaderCell:this.customHeaderCellYf,},
                ],
                dataSource:[],      
            },
            yd:
            {
                columns: [
                    {title: '检查类别',dataIndex: 'LB',key: 'LB',align: "center",customHeaderCell:this.customHeaderCellYf},
                    {title: '检查内容',dataIndex: 'RWMC',key: 'RWMC',align: "center",customHeaderCell:this.customHeaderCellYf,
                    customCell: () => {
                        return {
                            style: {
                                //可以定义样式
                                'text-align': 'left'
                            },
                        };
                    },
                    },
                    {title: '备注',dataIndex: 'BZ',key: 'BZ',align: "center",customHeaderCell:this.customHeaderCellYf},

                ],
                dataSource:[],      
            },

        };
    },
    methods: 
    {
        //年度计划表头行设置样式 和点击事件 
        customHeaderRowNd() {
            return {
                style: {
                    'font-size' : '20px',
                    color: '#FFF'
                },
                on: {
                    click: () => {this.$router.push('/ldjc/xcgl/ndjhList')},        // 点击表头行
                }
            }
        },
        //年度计划内容设置样式 
        customRowNd() {
            return {
                style: {
                    'font-size' : '16px',
                },
                // 点击表
                // on: {
                //     click: () => {
                //         console.log(record,index)
                //         // this.$router.push('/ldjc/xcgl/ndjhList')
                //     },        
                // }
            }
        },
        //点击单元格
        customCellNd(record,index){
            if (index == 0){
                return {
                    on: {
                        click: () => {
                            console.log(record,index)
                            this.$router.push('/ldjc/xcgl/ndXcxxList')
                        },        
                    }
                }
            }
            
        },

        renderTimeBackground(record,index){
            return this.customCellNd(record,index)
        },
        //月度计划表头行设置样式 和点击事件 
        customHeaderRowYf() {
            return {
                style: {
                    'font-size' : '20px',
                    'background-color': '#722ED1',
                    color: '#FFF' 
                },
                on: {
                    click: () => {this.$router.push('/ldjc/xcgl/ydjhList')},        // 点击表头行
                }
            }
        },
        //月度计划内容设置样式 
        customRowYf() {
            return {
                style: {
                    'font-size' : '16px',
                },
                on: {
                    click: () => {this.$router.push('/ldjc/xcgl/ydjhList')},        // 点击表
                }
            }
        },
        //表头单元格样式
        customHeaderCellYf(){
            return {
                style: {
                    'background-color': '#722ED1',
                    color: '#FFF' 
                },
            }
        },
        customRender(text, row, index)
        {
            const data = this.nd.dataSource
            for(var i=0;i<data.length;i++){
                if (index == data.length-1){
                    console.log(data[i]);
                    return {
                        children: <a href="javascript:;">{text}</a>,
                        attrs: {
                            colSpan: 3,
                        },
                    };
                }else{
                    return <a href="javascript:;">{text}</a>;
                }
            }
        },
        load()
        {
            var myDate = new Date();
            var month  = myDate.getMonth()+1
            this.form.YDBT = myDate.getFullYear()+"年"+month+"月检查工作计划"
            this.form.NDBT = myDate.getFullYear()+"年度检查工作计划"
            console.log("YDBT",this.form.YDBT)
            this.$httpGet(this,"", this.$API.XCJC_GET_NDJH).then(res =>
            {        
                console.log("data1",res.data)
                const data = res.data
                let sum = 0
                let qk = 0
                for(var i = 0;i<data.length;i++){
                    sum = sum+data[i].JCPC
                    qk = data[i].JCQK/data[i].JCPC
                    data[i].WCQK = (qk).toFixed(2)*100+"%";
                    data[i].JCPC = data[i].JCPC + '家/次'
                    data[i].JCQK = data[i].JCQK + '家/次'
                    console.log("sum",sum)
                }
                sum= sum + '家/次'
                console.log("sum",sum)
                data.push({JCLBMC:'合计',JCPC:sum});
                this.nd.dataSource = data
                console.log("dataSource1",this.nd.dataSource)
            })

            this.$httpGet(this,"", this.$API.XCJC_GET_YDJH).then(res =>
            {        
                console.log("data2",res.data)
                const data = res.data
                
                for(var i = 0;i<data.length;i++){
                    data[i].RWMC = data[i].GCMC+"+"+data[i].SJDW
                    console.log("RWMC",data[i].RWMC)
                }
                this.yd.dataSource = data
                console.log("dataSource2",this.yd.dataSource)
            })
        },
        //跳转页面
        XcjcSelect()
        {
            this.$router.push('/ldjc/xcgl/xclbSelect')
        },
        //跳转页面
        NdjhSelect()
        {
            this.$router.push('/ldjc/xcgl/ndjhList')
        },
        //跳转页面
        YdjhSelect()
        {
            this.$router.push('/ldjc/xcgl/ydjhList')
        }
    },
    mounted()
    {
        this.load();
    }
}
</script>

<!-- 引入样式 -->
<style lang="less">
    // @import "../less/list";
    //会影响到其他列表
    // .ant-table-thead>tr>th /deep/ {
    //     background-color: #722ED1 !important;
    //     color: #FFF !important
    // }

</style>
可釦--稀饭
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CustomCell
08-16
实现一个简单的动态表格TabelCell
用于layui table 自定义列
07-06
用于layui table 自定义列，保存table模板
Ant Design Vue （3.2.0）table组件：修改表头样式
sy979的博客
03-15 908
笔记：设置customHeaderCell属性
Ant中修改Table的标题title实现不同自定义背景颜色
孜然卷的博客
04-13 348
【代码】Ant中修改Table的标题title实现不同自定义背景颜色。
[ant design of vue ] table表格 ,选中行添加样式
AAAXiaoApple的博客
06-29 1426
table 表格 ， 选中行 添加样式
Ant Design vue 表格Table自定义数据，图片及点击
weixin_56718509的博客
06-11 3682
Ant Design vue表格的使用，包含插入图片，自定义数据，以及点击都有
Ant Desgin VUE ＜a-table＞ 行新增、删除、自定义行样式、处理行数据
Leonardo_zhang的博客
04-21 3962
页面效果展示 编写Columns，给表格绑定参数 columns部分 表格行新增 直接在数组中新增空数据，后续数据由弹窗回掉产生，当然这边也可自定义新增数据内容。 表格行删除 跟据对应的key，过滤出subData中不需要的值即可。 弹窗方法部分 通过this.$refs.modalBomForm调用子页面弹出 表格页面编辑内容保存 table 行编辑数值保存到subData数组 handleChange方法直接过滤出变动的行，修改数组中的对应参数值即可。 完整代码 弹窗部分代码未放出，新增、删除
Ant Design Vue 之a-tab单元格编辑
蜀道难，难于上青天。
04-27 4131
前言 最近遇到一个需求，要求表格中某一属性是可以单独改变的。看了 Ant Design Vue 的官方组件，发现不太灵活，所以自己动手写了一下。 官方实现 先看一下官方demo演示效果 发现只能整行编辑，不能单独针对某个属性进行单独编辑，例如只针对 name 或者 age 进行编辑。 手动调整 先看下效果 在每列的后面增加了一个编辑icon ，点击后的效果如下 整体效果如上图所示，此案例只展示了name。 代码部分 <template> <a-table :columns='co
LayUi数据表格自定义赋值方式
10-16
今天小编就为大家分享一篇LayUi数据表格自定义赋值方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui组件table实现自定义筛选功能的示例代码
10-17
主要介绍了element-ui组件table实现自定义筛选功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex:
自定义CustomCell
10-30
自定义CustomCell
Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip
01-16
封装HTML的Table，可直接编辑单元格内容，光标失去焦点时更新表格数据，利用slot插槽绑定操作按钮（编辑，删除、分享等），涉及到技术点包括：父组件给子组件传值、refs 对DOM进行操作，slot具名插槽的使用，插槽...
vue2 - Antd Table组件的头部单元格 字体加粗， 文字内容居中
LlanyW的专栏
11-18 7526
在当前.vue的style增加穿透antd table的表头样式，然后在使用table的外层设置加上class。所有单元格：在设置第一列时加上对齐属性：align: 'center',单独设置表头：在设置列时，加上方法：customHeaderCell。问题：默认情况下，英文字体加粗，中文字体不加粗，分2种情况，单独设置表头，或者所有单元格都居中。
antd table改变某一单元格样式和改变表头样式
weixin_47454566的博客
02-08 1014
ui要求是改变某一表头样式，和某一列单元格样式。
ant design for vue table表格添加编辑单元格功能
m0_63853518的博客
12-13 1224
记录一些技术基础
ant-table自定义表格，表头和表格拆分，自定义点击事件，扁平化数据处理拆分（vue2）
m0_73008551的博客
08-10 1080
ant-table自定义表格 单元格拆分 自定义单元格 单元格自定义点击事件
HTML中的基础标签（适合于新手）
最新发布
2301_80215285的博客
05-29 357
【代码】HTML中的基础标签（适合于新手）
如何使用vxe-table插件实现table表格自定义序号
06-03
要使用vxe-table插件实现table表格自定义序号，需要在vxe-table的column中使用type: 'index'来添加默认序号列。但这种默认序号列无法自定义，如果需要自定义序号，可以使用slot-scope来自定义序号列。具体步骤如下： 1. 在table的column中添加一个自定义列，例如： ``` { title: '序号', width: 80, slot: 'index' }, ``` 2. 在table的template中添加一个slot，例如： ``` <template #index="{ $index }"> <span>{{ $index + 1 }}</span> </template> ``` 这里的`$index`是v-for循环的索引值，可以根据需要进行自定义操作。上述代码中，通过`$index + 1`计算出自定义的序号值，并展示在页面上。 这样就可以实现自定义序号列了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值