表格数据处理的2种写法，伪元素和操作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] } } },