elementui页面模板（element ui模版）

本文目录一览：

• 1、element-ui 初始化页面框架
• 2、关于element-ui的按需引入配置
• 3、vue-element-ui-Cascader 级联选择器支持多选---折腾记
• 4、element-ui输入框怎么修改建议显示模版

element-ui 初始化页面框架

(2). 在 main.js 里引入修改后的 主题样式, 并把引入默认的主题去掉， 如图所示

(3). 示例

1.安装

自动转换成rem单位， 结果如下图

关于element-ui的按需引入配置

前言：因为刚开始搭建项目框架的时候比较急，那时候确认要使用element-ui框架，就直接去官网照着安装全局引入，最近项目结束后，发现首页的加载速度有点小慢，就准备将项目内的所有引入的element-ui组件全部归类出来，按需引入！怕忘记自己的这一套引入方式，因此记录，废话不多说，上菜！

目录结构我就上传了，本框架使用的是vue版本的，未转换为ts版本！

先创建一个companyImport.js,将element-ui的样式及所使用的组件全部引入，格式如下

然后进入main.js文件中，将之前定义的文件引入，然后使用Vue.use(xxx)进行全局声明

按照上面的配置，蹬~蹬~蹬~，之前页面内使用的组件就不报错了，因为我这个demo是写在vue-cli的vue-electron的模板下的，所以这里配置文件不一样，请关注重点！

vue-element-ui-Cascader 级联选择器支持多选---折腾记

最新版本的element已经有级联多选功能了

吐槽一下，程序猿最不愿听到的话之一，（人家某某网站就做出来了，你怎么做不出来，简直丧心病狂）我最近一直在开发基于vue-elementui的pc端项目，就碰到了来自产品的这句话，都有种拿起显示器了。不过吐槽归吐槽，项目还是要写的。。。。。。在本项目中产品提的一个需求，就是人家某某网站上有的，而element-ui上没有，那就是Cascader 级联选择器，element-ui只支持单选，于是就开始了折腾，再折腾了快一周的时间吧，还是没搞出来，最后由于项目着急上线，只能暂时先放弃，所以就先搁置了，后来幸得于空，于是乎又是开始折腾，毕竟也是自己的问题。哎，不说了，show time.

attributes属性说明

事件名称

options 菜单配置，就是完全按照elementui Cascader 的options的格式

一，index.vue 此页面为主要出口文件，会发射出一个得到选中后的item的方法以及数组。

二，MulCheckCascader.vue //此页面为基础模板，会在该页面引用递归出来的多选的item的字模板，并且该页面会接受引用页面传过来的数据，方便灵活控制尺寸，数据，是否禁用等的状态。

三，multiContent.vue 该页面为递归的所有children的Li的显示，以及选中点击事件

接下来就到需要引用的页面了。

这个插件到此也就完成了，终于解决了这个深坑，希望能帮助到小伙伴们，有什么不足的大家多多提出宝贵的意见，共同探讨，进步。

element-ui输入框怎么修改建议显示模版

scriptimport Vue from 'vue'Vue.component('my-remote', { functional: true, render: function(h, ctx) { var item = ctx.props.item; let str = h('li', ctx.data, [ h('div', { attrs: { class: 'name' } }, [item.value]), h('span', { attrs: { class: 'addr' } }, [item.address]) ]); if (item.str) { // 根据参数不同 修改原模版结构 str = h('center', { attrs: { class: 'ems' } }, [item.str]) } return str }, props: { item: { type: Object, required: true } }}); export default { data() { return { restaurants: [], state: '', timeout: null, _that: {} // 记录this，用来发起http请求 }; }, methods: { querySearch(queryString, cb) { let restaurants = this.restaurants; if (restaurants.length 0) { // 如果参数都没变化，则使用缓存数据，避免请求沉积 let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; cb(results); } else { const qtype = ‘参数’; this._that.$http('/inner', { qtype: qtype }) .then((res) = { restaurants = this.loadAll(res); this.restaurants = restaurants; let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; cb(results); }) .catch((err) = { restaurants = this.loadAll(); let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; cb(results); }); } }, createFilter(queryString) { return (restaurant) = { if (restaurant.str) return false; return (restaurant.value.indexOf(queryString) = 0); }; }, loadAll(data) { let serier = []; if (data) { for (let i = 0, l = data.length; i l; i++) { let a = data[i]; let b = ''; if (typeof a === "object") { b = a[1]; a = a[0]; } serier.push({ "value": a, "address": b }) } } else { // 如果没有请求到数据，则显示暂无数据！ serier.push({ "str": '暂无数据' }) } return serier; }, handleIconClick(ev) { this.state = ""; } }, mounted() { this._that = this; }}

elementui页面模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于element ui模版、elementui页面模板的信息别忘了在易优之家进行查找喔。