ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

element table改指定行或列的样式

2019-08-31 19:03:31  阅读:926  来源: 互联网

标签:40px 行或列 return rowIndex 单元格 style element columnIndex table


    如果遇到技术需求是 改指定行 或指定列 亦或者 指定单元格 的样式,可以通过以下方式实现

例如,要求表格第一列 ,左内边距 40px

通过设置 el-table的 cell-styleheader-cell-style 实现,element 官网 有如下介绍

首先,首先先写好回调方法,因为在项目的 多个地方会用到这个逻辑,所以,我将这个函数放到js文件中,

用 混合 (mixins)  去分发 (mixins的用法可以自己去了解下)
个人理解 mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,可以方便管理与统一修改

export default {

    methods: {

        // 单元格的 style 的回调方法
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                return `padding-left:40px;`;
            } else {
                return ''
            }
        },

        // 表头行的 style 的回调方法
        headCellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 && rowIndex === 0) {
                return `padding-left:40px;`;
            } else {
                return ''
            }
        },
    }
}

第二步,写好了回调方法之后 ,就可以在vue组件里面使用 了

import ListMixin from "../../assets/js/listMixins";
import TableMixin from "../../assets/js/tableMixins";


 mixins: [ListMixin, TableMixin],

 

第三步,在el-table  调用即可:

这样就实现了 指定第一列的 的左边距40px的要求。

如果您是需要改某指定单元格,比如 第五行 ,第六列 单元格的样式,道理相同,对应改rowIndex  和 columnIndex  这两个值即可。

     // 单元格的 style 的回调方法
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 6 && rowIndex === 5) {
                return `padding-left:40px;`;
            } else {
                return ''
            }
        },

 全文结束,全文作为记录而写,也希望能帮到看到此文的您,若有不恰当之处,欢迎指正!

 

标签:40px,行或列,return,rowIndex,单元格,style,element,columnIndex,table
来源: https://blog.csdn.net/weixin_40297452/article/details/100126655

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有