实现Element组件+单文件上传
This commit is contained in:
F嘉阳
@@ -2,10 +2,61 @@ var Main = {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeIndex: '1',
|
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: {
|
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) {
|
handleSelect(key, keyPath) {
|
||||||
console.log(key, keyPath);
|
console.log(key, keyPath);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -7,11 +7,46 @@
|
|||||||
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<el-container>
|
<el-container>
|
||||||
<div th:include="dist/thymeleaf/layout :: asider"></div>
|
<el-aside th:include="dist/thymeleaf/layout :: asider"></el-aside>
|
||||||
<div th:include="dist/thymeleaf/layout :: header"></div>
|
|
||||||
<el-container>
|
<el-container>
|
||||||
|
<el-header th:include="dist/thymeleaf/layout :: header"></el-header>
|
||||||
<el-main>
|
<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-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</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>
|
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
|
||||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
<head>
|
xmlns:th="http://www.thymeleaf.org">
|
||||||
<meta charset="UTF-8">
|
<head th:include="dist/thymeleaf/common_head :: header('登录')"></head>
|
||||||
<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>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- 先引入 Vue -->
|
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
||||||
<!-- 引入组件库 -->
|
|
||||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<el-row type="flex" class="row-bg" justify="center">
|
<el-row type="flex" class="row-bg" justify="center">
|
||||||
<el-col
|
<el-col
|
||||||
@@ -22,8 +14,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" class="row-bg" justify="center">
|
<el-row type="flex" class="row-bg" justify="center">
|
||||||
<el-col
|
<el-col :md="12" :lg="12" :xl="12">
|
||||||
:md="12" :lg="12" :xl="12">
|
|
||||||
<div class="grid-content bg-purple">
|
<div class="grid-content bg-purple">
|
||||||
<template>
|
<template>
|
||||||
<el-tabs v-model="activeName"
|
<el-tabs v-model="activeName"
|
||||||
@@ -96,7 +87,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<script src="./dist/js/LoginStyle.js"></script>
|
<script th:src="@{js/LoginStyle.js}"></script>
|
||||||
<!--<body>
|
<!--<body>
|
||||||
<!–<center>
|
<!–<center>
|
||||||
<h1>登录系统</h1>
|
<h1>登录系统</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user