元素 UI 防止通过自动完成在 table 中添加重复条目

Question

我使用 元素 UI 创建了此表单，其中我使用了自动完成功能。当前 自动完成 正在 table 中添加重复的条目，而 table 中已经存在。我想要一些东西来防止添加重复的条目。相反，当通过检查 upc_ean_isbn（因为它是唯一键）选择现有的 item_name 时，现有的应突出显示行。

这是我的代码

<template>
  <el-form
    ref="updateForm"
    :model="cart"
    status-icon
    label-width="100px"
    @keydown.enter.native="updateContact"
  >
    <el-table :data="cart.items" style="width: 100%">
      <el-table-column label="Code">
        <template slot-scope="scope">
          <el-input v-model="scope.row.code" disabled></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Name">
        <template slot-scope="scope">
          <el-autocomplete
            class="inline-input"
            v-model="scope.row.item_name"
            value-key="item_name"
            :fetch-suggestions="querySearch"
            placeholder="Please Input"
            :trigger-on-focus="false"
            @focus="setCurrentItem(scope.row)"
            @select="handleSelect"
          ></el-autocomplete>
        </template>
      </el-table-column>
      <el-table-column label="QTY">
        <template slot-scope="scope">
          <el-input v-model="scope.row.qty"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Price">
        <template slot-scope="scope">
          <el-input v-model="scope.row.price" disabled></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Amount">
        <template slot-scope="scope">
          <el-input v-model="scope.row.total" disabled></el-input>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="danger" @click="removeLine(scope.$index)">Del</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form-item>
      <el-button @click="addLine">Add</el-button>
    </el-form-item>
    <el-row>
      <el-col :span="6" :offset="14">Sub Total {{subTotal}}</el-col>
      <el-col :span="6" :offset="14">
        <el-form-item label="Discount" prop>
          <el-input placeholder v-model="cart.discount"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" :offset="14">Grand total {{grandTotal}}</el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      cart: {
        items: [],
        discount: 0
      },
      links: [],
      currentItem: null,
    };
  },
  methods: {
    removeLine(item) {
      if (item !== -1) {
        this.cart.items.splice(item, 1);
      }
    },
    addLine() {
      this.cart.items.push({
        code: "",
        item_name: "",
        qty: 1,
        price: 0,
        total: 0
      });
    },
    querySearch(queryString, cb) {
      var links = this.links;
      var results = queryString
        ? links.filter(this.createFilter(queryString))
        : links;
      // call callback function to return suggestions
      cb(results);
    },
    createFilter(queryString) {
      return link => {
        return (
          link.item_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    loadAll() {
      return [
        {
          id: 2,
          upc_ean_isbn: "102",
          item_name: "Lucy Olive Oil",
          size: "150 ml",
          description: "na",
          avatar: "no-foto.png",
          cost_price: "110.00",
          selling_price: "130.00",
          quantity: 30,
          type: 1,
          created_at: "2019-07-05 21:20:10",
          updated_at: "2019-07-06 10:41:09"
        },
        {
          id: 8,
          upc_ean_isbn: "23001",
          item_name: "Pen Desk",
          size: "6 inch",
          description: "",
          avatar: "no photos",
          cost_price: "300.00",
          selling_price: "350.00",
          quantity: 5,
          type: 1,
          created_at: "2019-10-25 14:42:07",
          updated_at: "2019-10-25 14:42:07"
        },
        {
          id: 9,
          upc_ean_isbn: "789",
          item_name: "Ink",
          size: "10 mL",
          description: "NA",
          avatar: "no photos",
          cost_price: "40.00",
          selling_price: "60.00",
          quantity: 17,
          type: 1,
          created_at: "2019-10-25 18:22:23",
          updated_at: "2019-10-25 18:22:23"
        },
        {
          id: 10,
          upc_ean_isbn: "2001",
          item_name: "Phone",
          size: "na",
          description: "na",
          avatar: "no photos",
          cost_price: "12000.00",
          selling_price: "14000.00",
          quantity: 5,
          type: 1,
          created_at: "2019-10-25 18:23:31",
          updated_at: "2019-10-25 18:23:31"
        },
        {
          id: 11,
          upc_ean_isbn: "999",
          item_name: "Tasty tea",
          size: "100 g",
          description: "",
          avatar: "no photos",
          cost_price: "30.00",
          selling_price: "40.00",
          quantity: 30,
          type: 1,
          created_at: "2019-10-25 18:55:39",
          updated_at: "2019-10-25 18:55:39"
        }
      ];
    },
    setCurrentItem(item) {
        this.currentItem = item
    },
    handleSelect(item) {
      this.currentItem.code = item.upc_ean_isbn;
      this.currentItem.item_name = item.item_name;
      this.currentItem.price = item.selling_price;
      this.currentItem.total = this.currentItem.price * this.currentItem.qty
    }
  },

  mounted() {
    this.links = this.loadAll();
  },

  computed: {
    subTotal: function() {
      return this.cart.items.reduce(function(carry, item) {
        return carry + parseFloat(item.qty) * parseFloat(item.price);
      }, 0);
    },
    grandTotal: function() {
      return this.subTotal - parseFloat(this.cart.discount);
    },
  },
  watch: {
    'cart.items' : {
        deep: true,
        handler: (items) => {
           items.forEach(element => element.total = element.price * element.qty)
         }
      }
  }
};
</script>

这是我的 jsfiddle https://jsfiddle.net/coolr/t8b6zvno/9/

谢谢

Answer 1

您可以更新 handeSelect 方法

handleSelect(item) {
  if (!this.cart.items.map(x => x.code).includes(item.upc_ean_isbn)) {
    this.currentItem.code = item.upc_ean_isbn;
    this.currentItem.item_name = item.item_name;
    this.currentItem.price = item.selling_price;
    this.currentItem.total = this.currentItem.price * this.currentItem.qty
  } else {
    this.currentItem.item_name = '';
  }
}