实现Element组件+单文件上传
This commit is contained in:
F嘉阳
@@ -2,10 +2,61 @@ var Main = {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
activeIndex2: '1',
|
||||
fileList: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
}],
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
|
||||
@@ -7,11 +7,46 @@
|
||||
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||
<div id="app">
|
||||
<el-container>
|
||||
<div th:include="dist/thymeleaf/layout :: asider"></div>
|
||||
<div th:include="dist/thymeleaf/layout :: header"></div>
|
||||
<el-aside th:include="dist/thymeleaf/layout :: asider"></el-aside>
|
||||
<el-container>
|
||||
<el-header th:include="dist/thymeleaf/layout :: header"></el-header>
|
||||
<el-main>
|
||||
|
||||
<el-row>
|
||||
<el-col :md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple-dark">
|
||||
<el-upload class="upload-demo" ref="upload" action="/cms/oneUpload" :on-preview="handlePreview" :on-remove="handleRemove"
|
||||
:file-list="fileList" :auto-upload="false" name="imageFile">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
|
||||
上传到服务器
|
||||
</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :md="24" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple-dark">
|
||||
<el-table :data="tableData3" height="250" border style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" type="success" plain size="small">
|
||||
下载
|
||||
</el-button>
|
||||
<el-button type="danger" plain size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
112
src/main/resources/templates/home/home2.html
Normal file
112
src/main/resources/templates/home/home2.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>主页</title>
|
||||
<!--
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
-->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="../../static/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<div id="app">
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<el-row class="tac">
|
||||
<el-col :span="24">
|
||||
<h5>默认颜色</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="login.jsp">登出</a></el-menu-item>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row>
|
||||
<el-col :md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple-dark">
|
||||
<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
|
||||
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false" name="imageFile">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
|
||||
上传到服务器
|
||||
</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :md="24" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple-dark">
|
||||
<el-table :data="tableData3" height="250" border style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" type="success" plain size="small">
|
||||
下载
|
||||
</el-button>
|
||||
<el-button type="danger" plain size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
<script src="../../static/js/homePage.js"></script>
|
||||
<script src="../../static/js/msg.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,17 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>登录</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="dist/css/style.css">
|
||||
</head>
|
||||
|
||||
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:include="dist/thymeleaf/common_head :: header('登录')"></head>
|
||||
<body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||
<div id="app">
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col
|
||||
@@ -22,8 +14,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col
|
||||
:md="12" :lg="12" :xl="12">
|
||||
<el-col :md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<template>
|
||||
<el-tabs v-model="activeName"
|
||||
@@ -96,7 +87,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<script src="./dist/js/LoginStyle.js"></script>
|
||||
<script th:src="@{js/LoginStyle.js}"></script>
|
||||
<!--<body>
|
||||
<!–<center>
|
||||
<h1>登录系统</h1>
|
||||
|
||||
Reference in New Issue
Block a user