vue + elementui 采坑实录

目录

elementui 组件中样式修改不生效

elementui 消息重复提示

elementui dialog关闭时销毁组件

elementui loading的层级居然没有dialog的层级高

elementui form 遍利验证的写法

elementui icon 偶现出现乱码

elementui 表格深色背景

elementui 树形表格带复选框

---

elementui 组件中样式修改不生效

• 解决方案：

1. 方案一：去除scope 属性，添加唯一标识类，防止全局污染
2. 方案二：全局文件（在main.js 中引入的文件）中添加

<style lang="scss">
.more-dialog {
  .el-dialog__title{
    font-size: 14px !important;
  }
}
</style>
<style lang="scss" scoped>
.el-table {
    background-color: transparent !important;
}
</style>

elementui 消息重复提示

• 解决方案：

utils 文件中新建message.js

// message.js
import { Message } from 'element-ui'

// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/**
 *  重写ElementUI的Message
 *  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置
 */
let messageInstance = null
class ReMessage {
  success(options, single = true) {
    this[showMessage]('success', options, single)
  }
  warning(options, single = true) {
    this[showMessage]('warning', options, single)
  }
  info(options, single = true) {
    this[showMessage]('info', options, single)
  }
  error(options, single = true) {
    this[showMessage]('error', options, single)
  }
  [showMessage](type, options, single) {
    if (messageInstance && single) {
      messageInstance.close()// 先把原来的关闭
    }
    messageInstance = Message[type](options)// 再创建新的消息
  }
}
export default new ReMessage()

main.js 中引入

import ReMessage from '@/utils/message'
Vue.prototype.$remess = ReMessage

// 全局使用
this.$remess.error(option)
this.$remess.success(option)

elementui dialog关闭时销毁组件

官方提供了的api， destroy-on-close 效果并不是我们想要的。我们要的是每次都会生成新的dialog，create 周期每次新建都会有，而 destroy-on-close ，则是在dialog 关闭时会再次执行create（无法理解这里为什么会是这样的逻辑）

• 解决方案：

通过v-if 操作

<el-dialog
  title="标题"
  v-if="isShow"
  :visible.sync="isShow"
>

</el-dialog>

elementui loading的层级居然没有dialog的层级高

• 解决方案：

指定统一class，full-loading, 之后在全局class 中设置 full-loading 的层级，{z-index: 2015 !impotant}

const loading = this.$loading({
    lock: true,
    text: 'Loading',
    customClass: 'full-loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
});

elementui form 遍利验证的写法

 <el-form :model="form" ref="form">
	<el-form-item
		v-for="(item, index) in form.domains"
		:key="index"
		:prop="'domains.' + index + '.docker_ip'"
		:rules="{
		required: true, validator: checkIp,index:index, trigger: 'blur',name: '管理存储IP'
		}">
			<p>{{item.ip}}</p>
			<p class="status" :class="item.status == 'active'? 'green':'grey'">
				{{item.status == 'active'? '在线':'离线'}}
			</p>
			<p><el-input v-model="item.docker_ip" size="small" :disabled="disabled"></el-input></p>
	</el-form-item>
</el-form>
...

data(){
    return{
        form: {
               domains: [] 
           }
            
    }
}

elementui icon 偶现出现乱码

根据网上查阅的资料，发现是elementui使用的sass 是dart-sass

• 解决方案一：

运行命令

npm uninstall sass
cnpm i node-sass -D

运行后发现报错 Syntax Error: Error: Cannot find module 'node-sass'

查看安装包，运行命令 npm ls --depth 0.

出现错误提示，node-sass 的版本与vue-admin-template 的版本不符 npm ERR! missing: node-sass@5.0, required by vue-admin-template@4.4.0

升级vue-admin-template 可能会导致新版本的规范与现有代码冲突，所以我们采用降低node-sass 版本的方式。

npm uninstall node-sass
cnpm i node-sass@4.14.1 -D

• 解决方案二：

对于vue-admin-template , 可以在文件 src/styles/element-variables.scss，替换 @import "~element-ui/packages/theme-chalk/src/index.scss （不会再引入乱码的icon样式）

// @import "~element-ui/packages/theme-chalk/src/index.scss
@import "~element-ui/packages/theme-chalk/src/pagination.scss";
@import "~element-ui/packages/theme-chalk/src/dialog.scss";
@import "~element-ui/packages/theme-chalk/src/autocomplete.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown-menu.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown-item.scss";
@import "~element-ui/packages/theme-chalk/src/menu.scss";
@import "~element-ui/packages/theme-chalk/src/submenu.scss";
@import "~element-ui/packages/theme-chalk/src/menu-item.scss";
@import "~element-ui/packages/theme-chalk/src/menu-item-group.scss";
@import "~element-ui/packages/theme-chalk/src/input.scss";
@import "~element-ui/packages/theme-chalk/src/input-number.scss";
@import "~element-ui/packages/theme-chalk/src/radio.scss";
@import "~element-ui/packages/theme-chalk/src/radio-group.scss";
@import "~element-ui/packages/theme-chalk/src/radio-button.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox-button.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox-group.scss";
@import "~element-ui/packages/theme-chalk/src/switch.scss";
@import "~element-ui/packages/theme-chalk/src/select.scss";
@import "~element-ui/packages/theme-chalk/src/button.scss";
@import "~element-ui/packages/theme-chalk/src/button-group.scss";
@import "~element-ui/packages/theme-chalk/src/table.scss";
@import "~element-ui/packages/theme-chalk/src/table-column.scss";
@import "~element-ui/packages/theme-chalk/src/date-picker.scss";
@import "~element-ui/packages/theme-chalk/src/time-select.scss";
@import "~element-ui/packages/theme-chalk/src/time-picker.scss";
@import "~element-ui/packages/theme-chalk/src/popover.scss";
@import "~element-ui/packages/theme-chalk/src/tooltip.scss";
@import "~element-ui/packages/theme-chalk/src/message-box.scss";
@import "~element-ui/packages/theme-chalk/src/breadcrumb.scss";
@import "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss";
@import "~element-ui/packages/theme-chalk/src/form.scss";
@import "~element-ui/packages/theme-chalk/src/form-item.scss";
@import "~element-ui/packages/theme-chalk/src/tabs.scss";
@import "~element-ui/packages/theme-chalk/src/tab-pane.scss";
@import "~element-ui/packages/theme-chalk/src/tag.scss";
@import "~element-ui/packages/theme-chalk/src/tree.scss";
@import "~element-ui/packages/theme-chalk/src/alert.scss";
@import "~element-ui/packages/theme-chalk/src/notification.scss";
@import "~element-ui/packages/theme-chalk/src/slider.scss";
@import "~element-ui/packages/theme-chalk/src/loading.scss";
@import "~element-ui/packages/theme-chalk/src/row.scss";
@import "~element-ui/packages/theme-chalk/src/col.scss";
@import "~element-ui/packages/theme-chalk/src/upload.scss";
@import "~element-ui/packages/theme-chalk/src/progress.scss";
@import "~element-ui/packages/theme-chalk/src/spinner.scss";
@import "~element-ui/packages/theme-chalk/src/message.scss";
@import "~element-ui/packages/theme-chalk/src/badge.scss";
@import "~element-ui/packages/theme-chalk/src/card.scss";
@import "~element-ui/packages/theme-chalk/src/rate.scss";
@import "~element-ui/packages/theme-chalk/src/steps.scss";
@import "~element-ui/packages/theme-chalk/src/step.scss";
@import "~element-ui/packages/theme-chalk/src/carousel.scss";
@import "~element-ui/packages/theme-chalk/src/scrollbar.scss";
@import "~element-ui/packages/theme-chalk/src/carousel-item.scss";
@import "~element-ui/packages/theme-chalk/src/collapse.scss";
@import "~element-ui/packages/theme-chalk/src/collapse-item.scss";
@import "~element-ui/packages/theme-chalk/src/cascader.scss";
@import "~element-ui/packages/theme-chalk/src/color-picker.scss";
@import "~element-ui/packages/theme-chalk/src/transfer.scss";
@import "~element-ui/packages/theme-chalk/src/container.scss";
@import "~element-ui/packages/theme-chalk/src/header.scss";
@import "~element-ui/packages/theme-chalk/src/aside.scss";
@import "~element-ui/packages/theme-chalk/src/main.scss";
@import "~element-ui/packages/theme-chalk/src/footer.scss";
@import "~element-ui/packages/theme-chalk/src/timeline.scss";
@import "~element-ui/packages/theme-chalk/src/timeline-item.scss";
@import "~element-ui/packages/theme-chalk/src/link.scss";
@import "~element-ui/packages/theme-chalk/src/divider.scss";
@import "~element-ui/packages/theme-chalk/src/image.scss";
@import "~element-ui/packages/theme-chalk/src/calendar.scss";
@import "~element-ui/packages/theme-chalk/src/backtop.scss";
@import "~element-ui/packages/theme-chalk/src/infinite-scroll.scss";
@import "~element-ui/packages/theme-chalk/src/page-header.scss";
@import "~element-ui/packages/theme-chalk/src/cascader-panel.scss";
@import "~element-ui/packages/theme-chalk/src/avatar.scss";
@import "~element-ui/packages/theme-chalk/src/drawer.scss";
@import "~element-ui/packages/theme-chalk/src/popconfirm.scss";

elementui 表格深色背景

.el-table{
    border: 1px solid #172147;
    background-color: #090f26;
}
.el-table::before{
    background-color: rgba(67, 154, 255, 0.15);
}
.el-table th,
.el-table td{
   background-color: #070c1f;color: #fff;border-color: rgba(67,154,255,.06) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: rgb(9, 21, 46) !important;
}
.el-table .cell{
    font-weight: 400;
}

elementui 树形表格带复选框

需求：选择父级，子级全部选中；全选，所有内容包括子级全部选中；全不选，所有内容包括全部不选。

• 解决方案一：

有一个博客有介绍，vue+element UI实现树形表格，带树形选择的复选框，也有一个插件可以试试 https://github.com/hql7/wl-tree-table

• 解决方案二：

因为我是用cdn引入的方式，就没有使用插件，自己去实现了。

重点是利用以下3个方法：

• @row-click="handleClickTableRow"

 /**
         * 当某一行被点击时会触发该事件
         */
        handleClickTableRow(row,tableName='multipleTable') {
              this.setCheckedStatus(row,tableName)
        },

• @select="handlerSelectRow"

handlerSelectRow(selection, row){
            this.setCheckedStatus(row,"userTable");
        },

• @select-all="handlerSelectAll"

handlerSelectAll(selection){
            this.userSelectDialog.isAll = !this.userSelectDialog.isAll;
// this.userSelectDialog.tableData 是初始数据，因为不是全选时，selection 为空
            this.userSelectDialog.tableData.forEach(row=>{
                this.setCheckedStatus(row,"userTable");
            })
        },

以及核心的复制方法

/**
         * @param row
         * @param tableName
         */
        setCheckedStatus(row,tableName){
            if(row.children && row.children.length){
                if(this.userSelectDialog.isAll){ // 如果全选则全部选中
                    row.checked = true;
                }else{
                    // 不是全选则切换状态
                    row.checked = row.hasOwnProperty('checked') ? !row.checked : true;
                }
                row.children.forEach(item=>{
                    // 设置状态
                    this.$refs[tableName].toggleRowSelection(item,row.checked);
                })
            }
        },

实现思路就是，针对 checkbox 勾选和全选勾选时，动态切换子元素的状态。

row.checked 是为了存之前状态，好切换状态。

之前试过 @selection-change 方法，但是发现和 toggleRowSelection 冲突，会出现死循环。所以分开@select 和 @row-click 分别触发选中。

但是这里有一个缺陷，当所有子级全部全校勾选时，父级不会相应取消还是会保留勾选状态。