表格数据处理的2种写法,伪元素和操作dom

栏目: CSS · 发布时间: 5年前

内容简介:伪元素:之所以被称为”伪元素”,是因为它们不是真正的页面元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素展现出来的,实际上是css样式展现的行为,因此被称为伪元素。:before 和 :after 的特点伪元素是通过样式来达到元素效果的,也就是说伪元素不占用 dom 元素节点

写法1:利用伪元素渲染

伪元素:之所以被称为”伪元素”,是因为它们不是真正的页面元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素展现出来的,实际上是css样式展现的行为,因此被称为伪元素。

:before 和 :after 的特点

伪元素是通过样式来达到元素效果的,也就是说伪元素不占用 dom 元素节点

伪元素不属于文档,所以 js 无法操作它

伪元素属于主元素的一部分,因此点击伪元素触发的是主元素的click事件

伪元素的优缺点

  • 优点
  • 减少 DOM 节点数
  • 让 css 帮助解决部分 js 问题,让问题变得简单
  • 缺点

*不利于 SEO

*无法审查元素,不利于调试

:before 和 :after常见使用场景

1.清楚浮动

2.利用 attr() 来实现某些动态功能

3.与 counter() 结合实现序号问题

4.特效使用

<data-tables-server :data="leftTableData" :total="total" :loading="serverTableLoading" @query-change="queryChange" :table-props="serverTableProps" :pagination-def="serverPaginationDef" :search-def="serverSearchDef">
    <el-table-column class="up_down" prop="exposure_num_rate" label="曝光量环比涨幅(%)" sortable="custom">
        <template slot-scope="scope">
            <span :class="scope.row.exposure_num_rate.includes('-')?'green':'red'">{{scope.row.exposure_num_rate}}</span>
        </template>
    </el-table-column>
</data-tables-server>
                
       // 以下为css样式         
        .red
            color red
        .red:after
            content "% ↑"
            color red
        .red:before
            content "+"
            color red
        .green
            color green
        .green:after
            content "% ↓"
            color green

写法2:操作dom进行渲染

<!--<data-tables-server :data="leftTableData" :total="total" :loading="serverTableLoading" @query-change="queryChange" :table-props="serverTableProps" :pagination-def="serverPaginationDef" :search-def="serverSearchDef">-->
                    <!--<el-table-column v-for="title in tableFixedTitles" :prop="title.prop" :label="title.label" :key="title.prop" sortable="custom" fixed="left"></el-table-column>-->
                    <!--<el-table-column v-for="title in tableTitles" :formatter='formatterColumn' :prop="title.prop" :label="title.label" :key="title.prop" sortable="custom"></el-table-column>-->
                <!--</data-tables-server>-->
        // 以下为操作dom的函数        
        formatterColumn (row, column, cellValue, index) {
            let key = column.property
            let h = this.$createElement
            if (row[key]) { // this.twoPercentArr.includes(key.toString())
                if (key.toString().includes('rate')) {
                    if (row[key] >= 0) {
                        return h('span', {
                            style: 'color:red'
                        }, '+' + row[key] + '% ↑')
                    } else if (row[key] < 0) {
                        return h('span', {
                            style: 'color:green'
                        }, row[key] + '% ↓')
                    }
                } else {
                    return row[key]
                }
            }
        },

以上所述就是小编给大家介绍的《表格数据处理的2种写法,伪元素和操作dom》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PWA实战

PWA实战

[美]Dean Alan Hume / 郑丰彧 / 电子工业出版社 / 2018-6 / 69

Progressive Web App(PWA)是由谷歌提出的一整套技术解决方案,它致力于为 Web 提供出色的用户体验,并完美体现了渐进增强原则。作为为数不多的实战入门用书,《PWA 实战:面向下一代的Progressive Web App》旨在通过大量清晰示例来介绍 PWA 的主要特性。全书一共由五个部分组成:第一部分介绍 PWA 的概念及解锁 PWA 应用的关键—Service Worker......一起来看看 《PWA实战》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具