表格数据处理的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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Data Structures and Algorithms with JavaScript

Data Structures and Algorithms with JavaScript

Michael McMillan / O'Reilly Media / 2014-2-22 / USD 28.51

If you’re using JavaScript on the server-side, you need to implement classic data structures that conventional object-oriented programs (such as C# and Java) provide. This practical book shows you how......一起来看看 《Data Structures and Algorithms with JavaScript》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具