Vue + Element UI (table)

<el-table-column prop="type" header-align="center" align="center" sortable label="轮播图类型">
                <template slot-scope="scope">
                <div v-if="scope.row.type==='HOMEPAGE'">首页</div>
                <div v-else>知识社区</div>
                </template>
</el-table-column>

使用Element UI 中的table的时候,表格中每一列对应的数据 即可通过 prop = ""  // = 后端返回的字段即可

在这里对应字段是type,后端返回的是 'HOMEPAGE' 'KNOWLEAGECOMMUNITY'

如果直接写

<el-table-column prop="type" header-align="center" align="center" sortable label="轮播图类型">
</el-table-column>


这样直接展示的是HOMEPAGE / KNOWLEAGECOMMUNITY
但是现在想要展示的是 如果是HOMEPAGE === 展示‘首页‘ 如果是KNOWLEAGECOMMUNITY === 展示'知识社区'
所以如上面,使用了 template 在对type进行判断一下



猜你喜欢

转载自www.cnblogs.com/rabbit-lin0903/p/11994691.html