m0_46627730的博客

tooltip文字溢出显示省略号，精准控制文字溢出的 tooltip 显示

前言最近做一个上传文件列表，列表中要显示上传进度，文件大小等等信息，还可以进行取消上传，重新上传，预览文件以及删除文件的操作。问题：删除文件时如何隐藏表格的该行数据题外话：或许你们会说不会将该行数据剔除出去吗？但目前我做的这个功能组件不允许这样干，哎~~原因：因为需要显示上传进度，这其中的数据牵涉到严格的顺序（索引下标index），所以删除文件的时候不能将其从数据数组中剔除出去，否则就会导致之后上传文件出错。所以用删除标识，有删除标识的就要从表格从隐藏起来，所以一开始感觉无从下手，惭愧…隐藏一行数

前言弄文件上传时，需要对上传列表的文件进行一定的操作，例如暂停/取消等等，因为我是使用element-ui中表格展示上传文件列表的，这时的操作却需要使用到当前行的索引下，如何获取索引就是我接下来要做的工作了：获取当前行的索引index使用scope.$index,scope.row即可实现获取索引<el-table-column label="排序" min-width="100"> <template slot-scope="scope"> {{sco

前言在用vue框架进行开发的时候，使用现成的UI组件库是十分方便的，但方便归方便，现成的它仍然不能满足我们所有的需求，为了达到预期的效果，我们仍需加以修改其样式，这里我采用的是将重写样式放入一个less文件中，再在需要修改样式的组件里引入从而达到修改该组件样式的效果。一：新建一个放重写样式的less文件二：重写样式这里我修改的是表格的背景色，边框色，以及悬浮背景色.el-table{ background-color: rgba(0,0,0,0.25); color: #FFFFFF;

最近在用element的抽屉展示修改主题样式供用户选择修改，但一打开抽屉会默认选中标题，标题出现蓝色的边框，自我感觉非常不好看，只能想办法去掉它。一开始的图：有个蓝色边框不好看吧。修改后的图：没有蓝色的框好看不少实现方式：还是回归最基本的样式修改，打开控制台，找到标题的样式控制，修改其中的outline样式即可。代码：/*去掉打开抽屉时自动选中标题时的蓝色边框*/ .el-drawer__header span:focus { outline: 0; }...

JS中使用Element的消息确认框并可触发回调函数！！一：JS文件引入element的消息确认框二：JS文件使用MessageBox，同时可触发回调函数最近在弄只有通过身份验证后才能登入组件，未通过的先通过element-ui的消息提示框告知用户未登录，待用户按下确认键后自动跳转到登录界面。虽然在js中引入messagebox并使用它是比较简单的，但我按照原本的用法却一直无法触发回到函数，正当我百思不得其解时，想起js一般都是通过.then来触发回调函数，就尝试用了一下，没想到效果还挺好，哈哈哈。一：

文章目录前言vue使用Element-UI部分组件适配移动端组件适配1---Message 消息提示适配样式代码组件适配2---MessageBox 弹框适配样式代码组件适配3---Dialog 对话框适配样式代码结语前言    使用组件库现成的组件是一件非常爽的事，基本不用自己敲代码，不用自己思考来思考去样式，就能得到一个比较满意的效果。但与此同时也会带来一些不便，那就是部分组件在移动端显得不太友好，还有就是有些样式达不到自己的预期，这时修改起来就比较麻烦了。

文章目录前言处理方式一：替换二：隐藏三：继续思考前言    相信很多人都会遇到图片地址失效导致无法显示图片，只显示几个字（加载失败），这样非常不美观。最近我在图片遍历显示时也遇到了其中一张图地址失效的问题，一堆图片中夹着一个加载失败，呃，感觉很不舒服，所以只能想办法解决。处理方式一：替换有时候可以选择用一张图片替换地址失效的图片，这样可以保持原有结构并且保证美观。<el-image :src="img.uRL" v-for="(img,in

文章目录一：vue使用vue-i18n插件实现网页中英文切换1：下载vue-i18n插件2：自己定义中英文两套js文件3：配置main.js文件4：通过点击事件切换语种5：数据渲染6：效果图二： Element日历区分上个月下个月等按钮和日期点击事件1：前言2：解决办法2.1： 给日历中的`tbody`元素添加点击事件：3：其他思路3.1：watch监听日历绑定数据变化实现更新数据：3.2：给上个月，下个月，今天三个按钮添加点击事件：一：vue使用vue-i18n插件实现网页中英文切换1：下载vue-i

文章目录前言解决办法给日历中的`tbody`元素添加点击事件：其他思路watch监听日历绑定数据变化实现更新数据：给上个月，下个月，今天三个按钮添加点击事件：前言前言：最近做个酒店管理系统，需要点击日历选择日期查询当天的酒店起价，这时我才用了element的日历（结合了element的对话框）。功能需求：点击价格日历打开日历对话框，点击日期更新酒店起价并关闭对话框，点击下个月，上个月以及今天只是更新日历而不关闭对话框和请求新起价。此过程我一路探索，都找不到比较好的办法，就只能退而求次，这里我才用的是

在做电商项目的时候需要添加修改收货地址，如何实现三级联动选取省市区地址困扰了我不少时间。难点：需要通过爬虫获取省市区数据。后来无意发现了element-china-area-data这个组件，哈哈，实现效果还可以呦。效果图：选取地址中：选好地址后显示：好了，各位肯定想知道如何获取数据吧？这就贴上代码吧：下载element-china-area-data：npm install element-china-area-data -S<template> <div

先搭建一个树形控件<el-tree :data="menus" ref="tree" show-checkbox node-key="id" :props="defaultProps" @check-change="handleCheckChange" v-show="menus" ></el-tree>一：获取数据：通过**getCheckedNo...

之所以写这个呢，是因为我在这踩了坑，弄了半个小时，哭…好了，话不多说，我要实现的是既有最小宽度，又可以按百分比适应宽度，以便表格兼容移动端，更好的显示。按照element-ui的文档：width是固定宽度，min-width最小宽度，呃，大家都知道，但我为什么会采坑呢？1：width与min-width只能写一个，两者都写只会显示固定宽度2：min-width可写数值也可写百分比，写百...

一：下载element-ui终端控制台输入npm install element-ui --save二：在main文件中引入element-ui（注意，此方法为全局引入，项目体积会较大一点，只是我觉得方便一点点）import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.us...