文章目录
样式问题
1 不显示滚动条，但仍然可以滚动
::-webkit-scrollbar{
display: none;
}
....
<el-table :data="tableData" style="width: 100%;height:100%;overflow: auto;"> </el-table>
2 table设置
2.1 el-table-column 宽度width为百分比
min-width
<el-table
:data="huodong_tableData"
style="width: 100%;height:100%;overflow: auto;"
height="100%" 固定表头
highlight-current-row 点击事件
@current-change="huodong_handleCurrentChange">
<el-table-column type="index" min-width="5%"></el-table-column>
<el-table-column prop="date" label="日期" show-overflow-tooltip min-width="30%"> </el-table-column>
<el-table-column prop="name" label="姓名" show-overflow-tooltip min-width="20%"> </el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip min-width="45%"> </el-table-column>
</el-table>
2.2 字段过长悬浮显示
show-overflow-tooltip
<el-table
:data="jingqing_tableData"
:show-header="false"
:fit="false"
style="width: 100%">
<el-table-column
prop="type"
label="警情类型"
:show-overflow-tooltip="true"
width="90">
</el-table-column>
<el-table-column
prop="content"
label="警情概况"
:show-overflow-tooltip="true"
width="250">
</el-table-column>
</el-table>
//提示框过长解决方案：
.el-tooltip__popper{
max-width:60%
}
2.3 取消hover变色
.el_table–enable-row-hover .el-table__body tr:hover > td {
background: unset !important;
}
2.4 修改选择行的颜色
- 1 开启element table 行高亮选项： highlight-current-row
- 2 /* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
background-color: #ff784a !important;
color: #fff;
}
2.5 设置、取消选中行
<el-table
:data="tableData"
style="width: 190px;"
highlight-current-row //高亮显示
@row-click="albumClick"
ref="multipleTable" //给table设置ref=‘multipleTable’>
<el-table-column
id="id"
prop="name"
label="名称"
width="190">
</el-table-column>
</el-table>
选中第一行
this.$refs.multipleTable.setCurrentRow(this.tableData[0])
取消选中this.$refs.multipleTable.setCurrentRow(null)
2.1 示例
3 同类型按钮展示
<el-row>
<el-col v-for="item in ziyuanyaosu" :span="6">
<el-image :id=item.id :src=item.src class="ziyuanyaosu" @click="ziyuanyaosuFun(item)"/>
</el-col>
</el-row>
ziyuanyaosu: [{
id: 1,
src: "static/image/bg.png",
name: "name1"
},{
id: 2,
src: "static/image/bg.png",
name: "name1"
},{
id: 3,
src: "static/image/bg.png",
name: "name1"
},{
id: 4,
src: "static/image/bg.png",
name: "name1"
},{
id: 5,
src: "static/image/bg.png",
name: "name1"
}]
//资源要素上图、清除操作
ziyuanyaosuFun(item){
console.log(item);
}
4 图片填充div
background: url(static/image/bg.png);
backgrond-repeat: no-repeat;
background-size: 100% 100%;
5 按比例平分
单位：
vw：视口的最大宽度，1vw=视口宽度的百分之一；
vh：视口得最大高度，1vh=视口高度的百分之一
px：像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的；
em：如果自身有font-size，em相对于自己的font-size,如果自身没有font-size，em相对于父元素的font-size(任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px)
%：相对于父元素的宽度大小
rem：相对于根元素（html）的字体大小宽高设置百分比
width: calc(100% - 2em);
padding-top,right,buttom,left百分比值
margin-top,right,buttom,left百分比值
都是相对于宽度的值计算，而不是相对于高度来计算的。
6 下拉框
6.1 带提示的下拉框
<template>
<el-select v-model="mubanType" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
<el-popover
placement="right"
width="300"
trigger="hover"
:content="item.label">
<el-button slot="reference" type="text" style="width:100%;color:black;">
<span style="float: left">{{ item.value }}</span>
</el-button>
</el-popover>
</el-option>
</el-select>
</template>
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
mubanType: '',
6.2 下拉框change方法使用
<template>
<el-select @change="anbaohuodong_change($event)" v-model="anbaohuodong_select" placeholder="请选择">
<el-option
v-for="item in anbaohuodong_options"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
// 安保活动点击事件
anbaohuodong_change(id){
console.log(id);
},
1 相关文件下载
2 分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element UI Learning</title>
<!-- import CSS -->
<link rel="stylesheet" href="static/index.css">
</head>
<body>
<div id="app">
<h1>分页</h1>
<button @click="show = !show">1111</button>
<div class="block" v-show="show">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[1, 10, 50, 100]"
:page-size=pageSize
layout="sizes, prev, pager, next, total"
:total=totalData>
</el-pagination>
</div>
</div>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
show: false,
currentPage: 2,
pageSize: 10,
totalData: 100
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
created(){
}
})
</script>
</body>
3 上传文件并保存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择文件</title>
<link rel="stylesheet" type="text/css" href="../static/css/index.css">
</head>
<body>
<div id="app">
<el-upload
class="upload-demo"
action="/postfile"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:on-success="handleSuccess"
accept=".doc, .docx"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过30kb</div>
</el-upload>
</div>
<script src="../static/js/vue.js"></script>
<script src="../static/js/index.js"></script>
<script src="../static/js/jquery-1.8.0.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
fileList: []
}
},
methods: {
//文件列表移除文件时的钩子
handleRemove(file, fileList) {
console.log(file, fileList);
this.fileList.splice(0,1);
},
//点击文件列表中已上传的文件时的钩子
handlePreview(file) {
console.log(file);
},
//文件上传成功时的钩子
handleSuccess(response, file, fileList){
console.log(file);
this.fileList.push(file);
},
//文件超出个数限制时的钩子
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
// 上传文件之前
beforeUpload(file) {
let size10M = file.size / 1024 < 30
if (!size10M) {
this.$message.warning('上传文件大小不能超过 30KB!');
return false;
}
},
//删除文件之前的钩子
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
uploadFile(){
console.log(this.fileList)
let formData = new FormData();
//拿到存在fileList的文件存放到formData中
var file = this.fileList[0].raw;
formData.append("file", file);
//下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
formData.append("title", file.name);
//方法1：使用Ajax发送
$.ajax({
url: '/postfile',
type: 'post',
data: formData, //直接将对象放在data后面
//ajax发送文件必须要指定两个参数
contentType:false, //不要使用任何编码，django后端能够自动识别formdata对象
processData:false, //告诉浏览器不要对你的数据进行任何处理
success:function (args) {
console.log("post file success");
}
})
//方法2：使用axios发送
axios.post('/postfile', formData, {
"Content-Type": "multipart/form-data;charset=utf-8"
}).then(res => {
if (res.data === "SUCCESS") {
this.$notify({
title: '成功',
message: '提交成功',
type: 'success',
duration: 1000
});
}
})
}
},
created(){
}
})
</script>
</body>
/*
application.yml加读取静态文件和解除上传文件大小的配置：
spring:
mvc:
static-path-pattern: /static/**
web:
resources:
static-locations: classpath:/static,classpath:/public,classpath:/resources,classpath:/META-INF/resources
#文件过大解决办法
servlet:
multipart:
max-file-size: 500MB #单个数据大小
max-request-size: 1024MB #总数居大小
POM加坐标：
<!--Word操作-->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.8</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-scratchpad</artifactId>
<version>3.8</version>
</dependency>
*/
package com.example.wordtool.controller;
import org.apache.poi.POIXMLDocument;
import org.apache.poi.POIXMLTextExtractor;
import org.apache.poi.hwpf.extractor.WordExtractor;
import org.apache.poi.openxml4j.opc.OPCPackage;
import org.apache.poi.xwpf.extractor.XWPFWordExtractor;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.*;
@RestController
public class ParseFileController {
//采用PostMapping
@PostMapping("/postfile")
public String saveVue(String title, @RequestParam("file") MultipartFile file, HttpSession session) throws Exception {
//拿到具体文件 file
System.out.println(title);
// 构建上传文件的存放 "文件夹" 路径
String fileDirPath = "src/main/resources/temp";
File fileDir = new File(fileDirPath);
if(!fileDir.exists()){
// 递归生成文件夹
fileDir.mkdirs();
}else{
// 删除文件下内容
deleteFolder(fileDir);
}
// 拿到文件名
String filename = file.getOriginalFilename();
// 输出文件夹绝对路径 -- 这里的绝对路径是相当于当前项目的路径而不是“容器”路径
System.out.println("文件绝对路径为:" + fileDir.getAbsolutePath());
try {
// 构建真实的文件路径
File newFile = new File(fileDir.getAbsolutePath() + File.separator + filename);
System.out.println("文件路径为" + newFile.getAbsolutePath());
// 上传文件到 -》 “绝对路径”
file.transferTo(newFile);
System.out.println(readWord(newFile.getPath()));
return "SUCCESS";
} catch (IOException e) {
e.printStackTrace();
}
return "FAIL";
}
public String readWord(String path) {
String buffer = "";
try {
if (path.endsWith(".doc")) {
FileInputStream is = new FileInputStream(path);
WordExtractor ex = new WordExtractor(is);
buffer = ex.getText();
is.close();
} else if (path.endsWith("docx")) {
OPCPackage opcPackage = POIXMLDocument.openPackage(path);
POIXMLTextExtractor extractor = new XWPFWordExtractor(opcPackage);
buffer = extractor.getText();
opcPackage.close();
} else {
System.out.println("此文件不是word文件！");
}
} catch (Exception e) {
e.printStackTrace();
}
return buffer;
}
//需要注意的是当删除某一目录时，必须保证该目录下没有其他文件才能正确删除，否则将删除失败。
public void deleteFolder(File folder) throws Exception {
if (!folder.exists()) {
throw new Exception("文件不存在");
}
File[] files = folder.listFiles();
if (files != null) {
for (File file : files) {
/*if (file.isDirectory()) {
//递归直到目录下没有文件
deleteFolder(file);
} else {
//删除
file.delete();
}*/
// 删除文件夹下内容
file.delete();
}
}
//删除
//folder.delete();
}
//读取代表格的word文档
public String readWordHasTable(String path) {
String buffer = "";
try {
if (path.endsWith(".doc")) {
FileInputStream is = new FileInputStream(path);
POIFSFileSystem pfs = new POIFSFileSystem(is);
HWPFDocument hwpf = new HWPFDocument(pfs);
Range range = hwpf.getRange();
for(int i = 0; i < range.numParagraphs(); i++) {
//段落
Paragraph p = range.getParagraph(i);
//字号，字号和是否加粗可用来当做标题或者某一关键标识的判断
int fontSize = p.getCharacterRun(0).getFontSize();
//是否加粗
boolean isBold = p.getCharacterRun(0).isBold();
if(p.isInTable()){
//读取表格
Table table = range.getTable(p);
int rowSize = table.numRows();
i += rowSize - 1;
for(int rowi = 0; rowi < rowSize; rowi++){
TableRow tableRow = table.getRow(rowi);
int celSize = tableRow.numCells();
for(int celi = 0; celi < celSize; celi++,i++){
String lineString = tableRow.getCell(celi).text();
// 去除字符串末尾的一个管道符
if (lineString != null && lineString.compareTo("") != 0) {
lineString = lineString.substring(0, lineString.length() - 1);
}
System.out.printf(lineString + " | ");
}
System.out.println("\n-------------------------------------------");
}
}else{
//读取段落
String paragraphText = p.text();
System.out.println(i + "--" + paragraphText);
}
}
} else if (path.endsWith("docx")) {
XWPFDocument xdoc = new XWPFDocument(POIXMLDocument.openPackage(path));
List list = xdoc.getBodyElements();
for(int i = 0; i < list.size(); i++){
Object object = list.get(i);
if(object instanceof XWPFParagraph){
//读取段落
String paragraphText = ((XWPFParagraph)object).getText();
System.out.println(i + "--" + paragraphText);
}else if(object instanceof XWPFTable){
//读取表格
for(XWPFTableRow row : ((XWPFTable)object).getRows()){
for(XWPFTableCell cell : row.getTableCells()){
System.out.printf(cell.getText() + " | ");
}
System.out.println("\n-------------------------------------------");
}
}
}
} else {
System.out.println("此文件不是word文件！");
}
} catch (Exception e) {
e.printStackTrace();
}
return buffer;
}
}
6396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
