element-ui替换主题色介绍

一 ：在项目中改变 SCSS 变量

1、element-ui的主题包是使用scss编写，如果项目也使用scss，可以直接在项目中改变element的样式变量

2、步骤

3、缺点

缺点：初始编译特别慢（？？？？不明白）

二：引入自定义主题

1、步骤

Vue ElementUI el-table

stockspecvue

网站入口

el-table 的文档里有很多的例子可以参考，这里记录一些我碰到的问题

但是这里有一个问题，如果希望表格占满页面，并且随着页面缩放同步变化应该怎么办。解决方法：可以用windowonresize方法来动态调整table的height

以上一些都只是提供了解决方法，没有对方法进行详细介绍，可以自行搜索用法。个人感觉consolelog是最实用的方法之一。

在 Vue 中引入 ElementUI 是非常常见的

elementUI-icon 图标

ElementUI 默认提供了一个 icon 图标集合,可以使用 i 标签展示

直接 class 名写图标名就能展示,这可太方便了

但是图标肯定是不够用的,总会要引入一些自己的图标,比如使用阿里的 iconfont

在阿里 帮助页面 我们可以看到好几种引入方式

其中 font-class 方式引入

可以看到,需要先写个 fontclass

然后每次引用都需要写 fontclass icon 名称

虽然不是什么繁琐的事,但写多了还是很烦的

那怎么才能做到和 element-icon 一样,只需要写 icon 名呢

图中揭晓了秘密,css 选择器

通过 css 选择器,使得只要 el-icon-开头/包含 el-icon-的 class 名,都会作用这块 css

可以看到,项目-更多 *** 作-编辑-前缀

这里支持写前缀,例如 wx-icon-

当然

你要是有 less 或者 scss 之类预编译框架也可以去 vueconfigjs 里面配全局引入

反正引入就行了

这下舒服了

<template>

<el-form :model="formData" :rules="formRules" ref="form">

<el-form-item v-for="(item, index) in formConfig" :label="itemlabel" :key="index">

<template v-if="itemtype === 'input'">

<el-input v-model="formData[itemfield]" :placeholder="itemplaceholder" @input="handleInput(itemfield)" />

</template>

<template v-else-if="itemtype === 'select'">

<el-select v-model="formData[itemfield]" placeholder="请选择" @change="handleSelect(itemfield)">

<el-option v-for="option in itemoptions" :key="optionvalue" :label="optionlabel" :value="optionvalue" />

</el-select>

</template>

<!-- 其他表单元素类型 -->

</el-form-item>

</el-form>

</template>

<script>

export default {

data() {

return {

formConfig: [], // 表单数据结构

formData: {}, // 表单数据

formRules: {} // 表单验证规则

}

},

methods: {

handleInput(field) {

// 处理输入框 input 事件

},

handleSelect(field) {

// 处理下拉框 change 事件

}

// 其他事件处理函数

}

}

</script>

在jsp中使用js中的设置属性，进而获得session保存的属性值，实例如下：

session设置：

sessionsetAttribute("username",username);

sessionsetAttribute("password",password);

session获取：

username=sessiongetAttribute("username");

password=sessiongetAttribute("password");

在我们使用element进行开发的时候，有时会出现一些奇怪的问题，这些问题有可能是框架本身的缺陷，也有可能是我们使用不当，遂将在开发过程中遇到的问题和值得记录下来的东西，做一个集合，方便以后参考。

在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件 *** 作关闭事件，并用第三个变量来控制显示与隐藏。并在visible后加sync。

ElementUI Form表单验证不通过，明明有值, 验证的错误信息不消失。

注意的点：

用props属性来配置成和后台数据一样的字段。

1、检查是否赋值成功；

2、赋值成功后检查拿到的数据是否与下拉列表数据id相匹配（可能后端先随便写的）

注意：1v-model绑定的值格式为 [12,23,34] 这种格式，如果不是需要进行处理。2检查返回id数组与下拉框列表中的数据是否有匹配，如果不匹配则显示不了文字。

[Vue warn]: <transition-group> children must be keyed: <ElTag>报错

在 保证绑定的数据类型与后台数据类型一致 的情况下，还出现以上报错，可能有以下原因：

勾选时默认获取到的节点是不包括半选状态的，所以我们前端传过去之后往往返回的也不包括半选状态的，所以反显的时候不正确。处理方法如下：

解决方案：

1设置check-strictly

checkStrictly是一个变量,默认值是false

2拿到接口数据后：

去除单选按钮里的数字，只需添加空格标签 &nbsp; 就行了。

解决方法：设置为具体的数值或百分比。( 注：每一个el-form-item可以设置单独的label-wodth。)

我们直接绑定一个事件的时候，事件默认有一个参数，但是我们想传第二个参数的时候，需要怎么传，以下就是解决方法：

>

以上就是关于element-ui替换主题色介绍全部的内容，包括:element-ui替换主题色介绍、第六篇 Element-ui中el-table的一些用法、无星的前端之旅（十二）——扩充elementUI的icon(少写个class)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！