elementui autocomplete自定义模板 如何使用后端传回来的模板

Question

问题描述

// autocomplete
<el-autocomplete
  popper-class="my-autocomplete"
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  @select="handleSelect">
  <i
    class="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>

上面是autocomplete自定义模板使用方法。现在那里的自定义模板需要用后端返回的html字符串模板渲染，里面的number name是数据 。

Answer 1

用v-html试试

Answer 2

你看下这个demo
https://codesandbox.io/s/vue-...

<template>
  <el-autocomplete
    popper-class="my-autocomplete"
    v-model="state"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  >
    <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
    <template slot-scope="{ item }">
      <div v-html="getHTML(item)"></div>
    </template>
  </el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      restaurants: [],
      state: "",
      demo: ""
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
        }
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    getHTML(item) {
      if (!this.demo) {
        return "<br/>";
      } else {
        return this.demo.replace(/\{\{[^}]*\}\}/g, str => {
          return item[str.slice(2, -2)] || "";
        });
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
    setTimeout(() => {
      this.demo = "<div>{{value}}</div><div>{{address}}</div>";
    }, 300);
  }
};
</script>

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