表格資料處理的2種寫法，偽元素和操作dom

Maldivee發表於2019-02-16

寫法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]
                }
            }
        },

相關文章