109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-row :gutter="10" class="mb8">
|
||
|
|
<el-col :span="1.5">
|
||
|
|
<el-button
|
||
|
|
type="primary"
|
||
|
|
plain
|
||
|
|
icon="el-icon-plus"
|
||
|
|
size="mini"
|
||
|
|
@click="handleAdd"
|
||
|
|
>
|
||
|
|
新增轮播图
|
||
|
|
</el-button>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-table :data="noticeList" border>
|
||
|
|
<el-table-column label="序号" align="center" width="100" type="index" />
|
||
|
|
<el-table-column prop="imgSrc" label="图片链接" align="center" />
|
||
|
|
<el-table-column prop="isShow" label="是否禁用" align="center">
|
||
|
|
<template>
|
||
|
|
<el-switch active-text="激活" inactive-text="禁用" v-model="value2" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="outLink" label="外部链接" align="center" />
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-dialog
|
||
|
|
title="新增轮播图"
|
||
|
|
:visible.sync="addSwiperVisible"
|
||
|
|
width="40%"
|
||
|
|
append-to-body
|
||
|
|
>
|
||
|
|
<el-form
|
||
|
|
ref="addSwiperFormRef"
|
||
|
|
:model="addSwiperForm"
|
||
|
|
:rules="addSwiperFormRules"
|
||
|
|
label-width="120px"
|
||
|
|
>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="外部链接：">
|
||
|
|
<el-input placeholder="请输入外部链接" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="是否激活：">
|
||
|
|
<el-switch
|
||
|
|
active-text="激活"
|
||
|
|
inactive-text="禁用"
|
||
|
|
v-model="value1"
|
||
|
|
></el-switch>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="轮播图上传："> </el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
<div slot="footer" class="dialog-footer">
|
||
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
|
|
<el-button @click="cancel">取 消</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
addSwiperVisible: false,
|
||
|
|
value1: true,
|
||
|
|
value2: true,
|
||
|
|
noticeList: [
|
||
|
|
{
|
||
|
|
imgSrc: "xxxx",
|
||
|
|
isShow: true,
|
||
|
|
outLink: "xxxx999",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgSrc: "xxxx",
|
||
|
|
isShow: true,
|
||
|
|
outLink: "xxxx999",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgSrc: "xxxx",
|
||
|
|
isShow: false,
|
||
|
|
outLink: "xxxx999",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleAdd() {
|
||
|
|
this.addSwiperVisible = true;
|
||
|
|
},
|
||
|
|
submitForm() {
|
||
|
|
this.addSwiperVisible = false;
|
||
|
|
},
|
||
|
|
cancel() {
|
||
|
|
this.addSwiperVisible = false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|