Element UI 实现增删改查 (以广告的增删改查为例)
本文直接贴了代码,可以应用于管理后天页面快速构建,有一些没用的逻辑 后续会进行优化和删除
<template>
<div >
<el-card>
<div><h2><el-button @click="createNewAdvertisementDialogVisible=true" type="primary">create</el-button></h2></div>
<el-table
:data="advertisementList"
border
highlight-current-row
style="width: 100%"
:row-class-name="rowClassName"
>
<el-table-column
min-width="20%"
prop="id"
label="id"
>
</el-table-column>
<el-table-column
prop="title"
label="title"
>
</el-table-column>
<el-table-column
label="picture"
min-width="120%"
>
<template slot-scope="scope">
<el-image
style="width: 150px; height: 70px"
:src="scope.row.attachmentUrl"
></el-image>
</template>
</el-table-column>
<el-table-column
min-width="120%"
prop="jumpUrl"
label="jump_url"
>
</el-table-column>
<el-table-column
min-width="60%"
prop="microKey"
label="micro_key"
>
</el-table-column>
<el-table-column
label="jump_type"
min-width="90%"
>
<template slot-scope="scope">
<div v-if="scope.row.jumpType == '0'">
<el-tag class="btns" size='mini' >MicroService</el-tag>
</div>
<div v-if="scope.row.jumpType == '1'">
<el-tag class="btns" size='mini' >NewsArticle</el-tag>
</div>
<div v-if="scope.row.jumpType == '2'">
<el-tag class="btns" size='mini' >ExternalLink</el-tag>
</div>
</template>
</el-table-column>
<el-table-column
label="status"
min-width="75%"
>
<template slot-scope="scope">
<div v-if="scope.row.advertisementStatus == '0'">
<el-button class="btns" size='mini' type="success" >enabled</el-button>
</div>
<div v-if="scope.row.advertisementStatus == '1'">
<el-button class="btns" size='mini' type="danger" >disabled</el-button>
</div>
</template>
</el-table-column>
<el-table-column
label="version"
min-width="60%"
>
<template slot-scope="scope">
<div v-if="scope.row.versionType == '0'">
<el-button class="btns" size='mini' type="primary" >Blue</el-button>
</div>
<div v-if="scope.row.versionType == '1'">
<el-button class="btns" size='mini' type="danger" >Red</el-button>
</div>
</template>
</el-table-column>
<el-table-column
prop="colDate"
label="date"
min-width="60%"
>
</el-table-column>
<el-table-column
label="createTime"
>
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{
{ scope.row.createTime|formatDate }}</span>
</template>
</el-table-column>
<el-table-column
label="updateTime"
>
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{
{ scope.row.updateTime|formatDate }}</span>
</template>
</el-table-column>
<el-table-column
label="op_content"
min-width="100%"
>
<template slot-scope="scope">
<el-button-group>
<el-button class="btns" size='mini' @click="update(scope.$index, scope.row)" type="primary" >edit</el-button>
<el-button class="btns" size='mini' @click="deleteOneAdvertisement(scope.$index, scope.r