vue
小胖不怂!
这个作者很懒,什么都没留下…
展开
-
el-table修改表格样式
实现效果:实现:添加:row-style,动态绑定方法tableRowClassName<el-table ref="sortTable" :height="sortTableHeight" style="width: 100%;" border :row-style="tableRowClassName" :stripe="false" :header-cell-style="{background: '#EBEEF5',border: '0px solid #DDD原创 2021-12-27 14:05:54 · 648 阅读 · 0 评论 -
el-table修改表头样式
实现效果:添加 :header-cell-style="{background: '#EBEEF5',border: '0px solid #DDDDDD',height: '10px',color:'#2B579A'}"<el-table ref="sortTable" :height="sortTableHeight" style="width: 100%;" border :row-style="tableRowClassName" :str原创 2021-12-27 14:01:56 · 649 阅读 · 0 评论 -
el-table数据超出字数显示提示信息
实现效果:在el-table-column 中添加 :show-overflow-tooltip="true"<el-table-column v-for="(item,index) in tableDataTitle" :show-overflow-tooltip="true" :key="index" :prop=tableDataTitle[index] :label=tableDataTitle[index] width="auto"></el-table-colu原创 2021-12-27 13:56:40 · 517 阅读 · 0 评论 -
动态添加和删除下拉框
实现效果:点击添加排序列,增加一个下拉框组合,点击减号,删除当前下拉框组1、这里我使用el-form去实现下拉框的动态添加<el-form ref="form" :model="form" :inline="true" label-width="20px" style="display: inline-block;height: 83px"> <div style="width: 100%;height: 82px"> &l原创 2021-12-27 13:48:02 · 830 阅读 · 0 评论 -
el-table自适应
实现效果:分页永远贴着浏览器底部,放大和缩小浏览器大小,数据显示增多和减少1、缩小2、放大实现过程:1、el-table标签内添加ref="sortTable"和:height="sortTableHeight"2、定义sortTableHeight: 350<el-table ref="sortTable" :height="sortTableHeight" style="width: 100%;" border :row-style="tableRowC原创 2021-12-27 11:53:41 · 2462 阅读 · 0 评论 -
点击el-tree节点进行阻断,不触发点击事件
1、实现效果:点击map图标,不触发点击事件2、添加一个@click.stop方法,里面什么也不用写<el-tree :data="groups" :props="defaultProps" style="padding-top: 20px;" highlight-current :default-expand-all=false @node-click="handleNodeClick"原创 2021-12-27 11:38:58 · 4210 阅读 · 1 评论 -
字数超出长度用省略号显示并出现提示,显示全部内容
实现效果字数超出长度显示省略号,使用CSS实现overflow: hidden;text-overflow: ellipsis;white-space: nowrap;超出字数出现提示,我使用的是element-ui的el-tooltip实现的。添加一个mouseover方法,鼠标放到文字上面,去判断文字的长度,如果长度超过自己设定的长度,设置disabledTooltip=false<el-tooltip :disabled="disabledTooltip" class=.原创 2021-12-27 11:21:29 · 2247 阅读 · 0 评论 -
禁止上传文件按钮失效问题解决
问题:如果只在选择文件按钮上动态绑定 :disabled=“true”,依然可以上传文件,解决方法:后来查看官方文档,需要在el-upload属性中添加:disabled=“true”,这个才能禁止上传文件按钮。这里我两个都加上了,配合着使用实现了最终效果。 <el-upload class="upload-demo" ref="importFile" action="" :befor.原创 2021-12-01 13:29:21 · 2414 阅读 · 0 评论 -
el-checkbox选中一个之后其他禁止选用
效果图:<el-checkbox-group v-model="checkedColumns" :max="1" @change="handleCheckedColumnsChange"> <el-checkbox v-for="(item,index) in columns" :label="item" :key="index" style="display: block; padding-top: 10px;" > {{item.t原创 2021-12-01 11:58:07 · 1669 阅读 · 0 评论 -
vue使用父子组件传递值和调用方法
1、父子组件关系:在父组件通过import 方式引入子组件例如:import excelDataset from './excelDataset.vue'2、在export default 模块中添加 components属性,内容是导入的子组件components: {excelDataset},3、使用:直接通过标签,即可使用,我这里是通过excelDatasetVisible来控制子组件的显示和隐藏,子组件的内容是一个dialog弹框<excelDataset ref="excelDa原创 2021-12-01 11:43:08 · 2251 阅读 · 0 评论 -
element-ui Message Box确定按钮居中,标题靠左
效果:1、Message Box弹框提供一个属性, center 如果设置这个属性为true,那么标题、按钮、内容都会居中显示,如果为false(默认),标题靠左,按钮靠右,不是我们想要的效果,而且在vue文件种修改style,并不会起作用2、解决办法:单独写一个css文件,通过import的方式引入,在css文件中定义样式.el-message-box__btns { padding: 5px 15px 0; text-align: center;}...原创 2021-12-01 11:21:47 · 4206 阅读 · 0 评论 -
el-tree树形组件使用
实现效果:可以添加分组,添加分组下面的业务包,以及一级分类显示加号,二级分类显示其他图标,点击省略号弹出下拉框操作,一级分类没有移动操作,<el-tree :data="groups" :props="defaultProps" style="padding-top: 20px;" highlight-current :default-expand-all=false @node-click="hand原创 2021-12-01 11:10:43 · 17787 阅读 · 4 评论 -
Vue-Quill-Editor上传图片问题解决
使用Vue-Quill-Editor上传图片会默认把图片转为base64编码,导致后台存储不了,所以我们需要修改上传图片组件,这里我使用的是官网的增强模块quill-image-extend-module,具体使用步骤为:安装依赖:npm install quill-image-extend-module --save-dev...原创 2021-07-31 13:56:52 · 1395 阅读 · 1 评论 -
vue使用富文本编辑器
vue-富文本编辑器Vue-Quill-Editor使用官网文档,可以参照文档进行使用https://www.kancloud.cn/liuwave/quill/1434140简单的使用:首先安装依赖:npm install vue-quill-editor --save然后可以在全局挂载或者在单页面挂载单页面挂载示例:import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'// require styles原创 2021-07-30 17:25:21 · 5729 阅读 · 0 评论