共计 1925 个字符，预计需要花费 5 分钟才能阅读完成。
写法 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]
}
}
},
