vue中使用elementui的简单介绍

本文目录一览：

• 1、在vue项目中使用elementui之checkbox

• 2、Element-UI 的基本使用（基于 Vue 的 组件库）

• 3、vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

• 4、vue中修改element ui组件默认样式的两种方式

• 5、vue中搭配element ui实现省市区三级联动

• 6、vue使用elementUI的表格，内容自适应

在vue项目中使用elementui之checkbox

elementui对于checkbox的应用也是非常广泛的，checkbox一般都是以集合的形式出现。

而你的checkbox也有很大的程度是绑定在你的列表里面。例如这样：

而在elementui中的checkbox绑定的是label的值，但是一般情况下，我们希望绑定的是id。显示的是name.

因为我们的label绑定id的话，在进行增删改查操作的时候，我们只需要在你的checkbox-group上面绑定一个 Array。即可获取你所有选中项的id。

有一种情况出现了：

只需要这么写就可以了：

你的label绑定id，然后中间绑定你的name。。

并不需要修改源文件。

你的脸是不是又方了？

Element-UI 的基本使用（基于 Vue 的 组件库）

✍ 目录总览：

① 安装依赖包 npm i element-ui –S

② 导入 Element-UI 相关资源

① 运行 vue ui 命令，打开图形化界面

② 通过 Vue 项目管理器 ，进入具体的项目配置面板

③ 点击 插件 - 添加插件 ，进入插件查询面板

④ 搜索 vue-cli-plugin-element 并安装

⑤ 配置插件，实现按需导入，从而减少打包后项目的体积

最终效果：

vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。

1、vue如何使用element-ui

2、创建相应文件。

a、创建父组件 src/components/tabZujian.vue

b、创建自组件（被切换的组件）src/tabComponents 文件夹

+ + tabComponents（目录）

---- tabZujianChild1.vue

---- tabZujianChild2.vue

3、编写组件实现tab切换不同子组件

tabZujian.vue

template

div class="tabZujian"

el-tabs v-model="activeName"

el-tab-pane label="tab1" name="first" :key="'first'"

child1/child1

/el-tab-pane

el-tab-pane label="tab2" name="second" :key="'second'"

child2/child2

/el-tab-pane

/el-tabs

/div

/template

script

import tabZujianChild1 from '@/tabComponents/tabZujianChild1'

import tabZujianChild2 from '@/tabComponents/tabZujianChild2'

export default {

name: 'tabZujian',

components:{

child1:tabZujianChild1,

child2:tabZujianChild2

},

data() {

return { //默认第一个选项卡

activeName: "first",

}

}

}

/script

tabZujianChild1.vue

template

div class="child1" 我是第一个自组件 /div

/template

script export default {

name: 'child1',

mounted(){

console.log("tab1组件")

}

}

/script

tabZujianChild2.vue

[template

div class="child2" 我是第二个子组件 /div

/template

script export default {

name: 'child1',

mounted(){

console.log("tab2组件")

}

} /script

[

默认是tab1显示　切换到tab2显示也成功了

!* 但是不知道同学们是否注意到：

1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本

2、当路由到这个tab页面的时候，应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console

3、当你打开控制台的时候，你会很惊讶的发现。两个组件之中的console都被打印了。这说明，并不是我想象的，tab到1时候打印组件1；tab到2时候打印组件2

4、解决

这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件

更改一下tabZujian.vue

template

div class="tabZujian"

el-tabs v-model="activeName" @tab-click="handleClick"

el-tab-pane label="tab1" name="first" :key="'first'"

child1 v-if="isChildUpdate1"/child1

/el-tab-pane

el-tab-pane label="tab2" name="second" :key="'second'"

child2 v-if="isChildUpdate2"/child2

/el-tab-pane

/el-tabs

/div

/template

script

import tabZujianChild1 from '@/tabComponents/tabZujianChild1'

import tabZujianChild2 from '@/tabComponents/tabZujianChild2'

export default {

name: 'tabZujian',

components:{

child1:tabZujianChild1,

child2:tabZujianChild2

},

data() { return { //默认第一个选项卡

activeName: "first",

isChildUpdate1:true,

isChildUpdate2:false

}

},

methods:{

handleClick(tab) {

if(tab.name == "first") {

this.isChildUpdate1 = true;

this.isChildUpdate2 = false;

} else if(tab.name == "second") {

this.isChildUpdate1 = false;

this.isChildUpdate2 = true;

}

}

}

} /script

这回当你没吃切换tab的时候在注意v8的console

成功了

vue中修改element ui组件默认样式的两种方式

vue项目中经常会用到element ui，有时候需要修改默认的样式，比如表格，导航栏等，输入框等等。

可以用以下两种方式修改：

1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改

2.外部引入css文件，默认样式会被覆盖

3.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐）

也可以在外层加一个div，然后赋值一个class或者id，在scss中用这种语法修改对应的组件上的class名字即可

vue中搭配element ui实现省市区三级联动

业务场景一：选择框，类似于选择目的地，出发地这种，，可以设置省，或者省市，以及省市区

业务场景二：在编辑页或者添加页中会需要更加详情的，省市区以及后面另加一个框

首先，从后台拿回来的数据是这样子的

首先拿到数据输出到控制台上是这样的

第一步处理转化成字符串

let cityData =jsON.stringify(data.data.data);

第二步用正则把这些相对应的关键字段转化成element ui  三级联动需要 的字段

options =JSON.parse(cityData.replace(/orgId/g,"value").replace(/orgName/g,"label"));

第三步进一步演变成符合框架使用的格式

options.map((item, index)={

item.children = item.childrenDataList;

this.options.push(item);

});

el-cascader :options="options" clearable filterable v-model="optionsMessage"/el-cascader

这个时候就可以实现选择省市区的功能了，其中v-model的绑定的值就是后台需要的orgId

vue使用elementUI的表格，内容自适应

1.elementUI的官方是没有这个内容自适应的功能，只能自己来写，我利用了混合的方式来实现；

首先创建minixs/flexColumnWidth.js文件；

2.在需要的页面中引用

3.此方法完美的实现了内容的自适应，但是同一个表格不建议所有的列都设置这个，若是都设置那整个表格的宽度有可能不能满屏适应，具体效果可根据自己的需要来设置；

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。