ElementUI的自定义模板

ElementUI的自定义模板

ElementUI自定义模板的使用

• 前言
• 一、ElementUI的Input重要属性
• 二、使用步骤
• • 1.上实例（转自Element官网）
  • 2.介绍几个重要参数方法
  • • 3.基于以上的介绍，做一个带提示的搜索输入框
• 总结

前言

ElementUI对于初学小白来说可能还有很多不太友好的地方，简单来说就是没有那么通俗易懂，作为一个萌新今天记录一下学习过程中的一些经验。主题为ElementUI的Input自定义模板

一、ElementUI的Input重要属性

示例：

二、使用步骤

1.上实例（转自Element官网）

代码如下（示例）：

<el-autocompletepopper-class="my-autocomplete"v-model="state":fetch-suggestions="querySearch"placeholder="请输入内容"@select="handleSelect"><iclass="el-icon-edit el-input__icon"slot="suffix"@click="handleIconClick"></i><template slot-scope="{ item }"><div class="name">{{ item.value }}</div><span class="addr">{{ item.address }}</span></template>
</el-autocomplete><style>
.my-autocomplete {li {line-height: normal;padding: 7px;.name {text-overflow: ellipsis;overflow: hidden;}.addr {font-size: 12px;color: #b4b4b4;}.highlighted .addr {color: #ddd;}}
}
</style><script>export default {data() {return {restaurants: [],state: ''};},methods: {querySearch(queryString, cb) {var restaurants = staurants;var results = queryString ? restaurants.ateFilter(queryString)) : restaurants;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (restaurant) => {return (LowerCase().LowerCase()) === 0);};},loadAll() {return [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" }];},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);}},mounted() {staurants = this.loadAll();}}
</script>

效果截图：![在这里插入图片描述](.png#pic_center)

2.介绍几个重要参数方法

1. autocomplete ：是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。queryString为你输入到输入框的字符串，该方法在文本框输入字符时立即触发。
2. 使用scoped slot自定义输入建议的模板。该 scope 的参数为item，表示当前输入建议对象。即为上面的cb（data）返回的数据。
3. @select方法为选中给出的匹配项点击时触发的事件

3.基于以上的介绍，做一个带提示的搜索输入框

1. 重写loadAll方法

loadAll(){("/findAll"//基于axios的请求调用,).then(res => {staurants = res.data})
}

2. 页面加载时挂载

	mounted() {this.loadAll();}

3. 搜索时提示

 querySearch(queryString, cb) {var restaurants = staurants;var results = queryString ? restaurants.ateFilter(queryString)) : "";// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (restaurant) => {return (LowerCase().LowerCase()) === 0);};},

总结

本文简单介绍了一下ElementUI的Input自定义模板的使用，做分享交流之用，水平有限，如有不当，请及时私信联系我！