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

2023年1月29日 166次阅读 来源: Maldivee

写法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]
                }
            }
        },
    原文作者：Maldivee
    原文地址: https://segmentfault.com/a/1190000017880569
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞