请问vue中的el是什么的缩写?

发布网友

共2个回答

懂视网

本文分为html，js和css代码给大家详细介绍了vue Element-ui input 远程搜索与修改建议显示模版功能，感兴趣的朋友一起看看吧，希望能帮助到大家。

html:

<template>
 <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click="handleIconClick">
 </el-autocomplete>
</template>

js:

<script>
import 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('p', { 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.toLowerCase()) === 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;
 }
}
</script>

css:

<style lang="scss">
.my-autocomplete {
 li {
 line-height: normal !important;
 padding: 7px !important;
 
 .name {
 text-overflow: ellipsis;
 overflow: hidden;
 }
 .addr {
 font-size: 12px;
 color: #b4b4b4;
 }
 
 .highlighted .addr {
 color: #ddd;
 }
 }
 .ems {
 font-size: 12px;
 color: #b4b4b4;
 }
}
</style>

热心网友

element的缩写
类型： String | HTMLElement | Function

*：在组件定义中只能是函数。

详细：

为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。注意元素只用作挂载点。如果提供了模板则元素被替换，除非 replace 为 false。元素可以用 vm.$el 访问。追问也就是说这个element和Element-ui没有联系是嘛?

追答组件，各有各的用法

全部栏目

请问vue中的el是什么的缩写?