devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI记录_el-select 去除hover

作者：花生_TL007 | 2024-02-19 11:21:48

赞

踩

el-select 去除hover

文章目录

样式问题

1 不显示滚动条，但仍然可以滚动

		::-webkit-scrollbar{
			display: none;
		}

		....

		<el-table :data="tableData" style="width: 100%;height:100%;overflow: auto;">	</el-table>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
//提示框过长解决方案：
		.el-tooltip__popper{
			max-width:60%
		}

  • 1
  • 2
  • 3
  • 4

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

选中第一行
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>

  • 1
  • 2
  • 3
  • 4
  • 5
			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);
		}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

在这里插入图片描述

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
				options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                mubanType: '',

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
// 安保活动点击事件
anbaohuodong_change(id){
	console.log(id);
},

  • 1
  • 2
  • 3
  • 4

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
/*
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;
    }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/114413
推荐阅读