Considering the beauty of the front-end page of the system, the status information in a piece of data is usually replaced by a Tag tag. With just a little operation, the beauty of the page can be greatly improved. The before and after comparison is shown below. The code is implemented based on Vue and Element-ui components.
Before modification:
After modification:
The original code before modification looks like this:
<el-table :data="tableData" border stripe header-cell-class-name="headerBgColor">
<el-table-column type="index" label="编号" width="100"></el-table-column>
<el-table-column prop="name" label="数据集名称" width="200"></el-table-column>
<el-table-column prop="time" label="上传时间" width="200"></el-table-column>
<el-table-column prop="status" label="可用状态" width="200"></el-table-column>
</el-table>
The modified code looks like this:
<el-table :data="tableData" border stripe header-cell-class-name="headerBgColor">
<el-table-column type="index" label="编号" width="100"></el-table-column>
<el-table-column prop="name" label="数据集名称" width="200"></el-table-column>
<el-table-column prop="time" label="上传时间" width="200"></el-table-column>
<el-table-column prop="status" label="可用状态" width="200">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status == 1">可用</el-tag>
<el-tag type="danger" v-if="scope.row.status == 0">不可用</el-tag>
</template>
</el-table-column>
</el-table>