Requirements:

  1. Use a drop-down box on the page to display multiple columns of content.”
  2. When the data is submitted, it is one of the fields in the Item data
  3. A multi-column drop-down box searches the data in each of these columns

demo

Sequencing – Use software and framework versions

  1. Vue 2.6.11
  2. Element – UI 2.15.1

Design ideas

The ant-desing-vue version of the multi-column drop-down box, using the use of render embedded in the select table, multi-column data display.

Since there is no render attribute in the Element-UI component, try embedding multiple spans in option to give span style control over the width

Add the Filterable attribute to provide the drop-down data search function, but can only search all values in the label, so find the original filter-method attribute and rewrite the search function to realize the fuzzy search of multi-column data

When submitting data, due to the element- UI itselfkey,value,labelIs detached, so the change method submits the current one when option is selectedvaluevalue

Specific code process

1. Template Indicates the template area

<template>
  <div>
    <div class="select-title">Dessert:</div>
    <el-select
        style="width: 600px"
        v-model="selectValue"
        filterable
        placeholder="Please select"
        :filter-method="filterSelectMethod"
        @change="change"
    >
      <el-option
          v-for="item in options"
          :key="item.select"
          :label="item.food"
          :value="item.select"
      >
        <span class="option-span">{{ item.select }}</span>
        <span class="option-span-short">{{ item.cookMethod }}</span>
        <span class="option-span-long">{{ item.food }}</span>
      </el-option>
    </el-select>
  </div>
</template>
Copy the code

2. Js area

<script>
const selectList = [
  {
    select: 'option 1'.food: 'Golden cake golden cake golden cake'.cookMethod: 'steam'
  },
  {
    select: 'option 2'.food: 'Double skin milk'.cookMethod: 'fire'
  },
  {
    select: 'option 3'.food: Oyster omelet.cookMethod: 'cook'
  },
  {
    select: 'option 4'.food: 'Dragon beard noodles'.cookMethod: 'cooking'
  },
  {
    select: 'option 5'.food: 'Peking Duck'.cookMethod: 'roast'
  }]
export default {
  name: ' '.components: {},
  watch: {},
  data() {
    return {
      selectValue: "".options: selectList
    }
  },
  methods: {
    change(value) {
      console.log(value)
    },
    filterSelectMethod(key) {
      console.log(key)
      if (key) {
        this.options = selectList.filter(
            item= >
                item.food.includes(key) ||
                item.select.includes(key) ||
                item.cookMethod.includes(key)
        )
      } else {
        // console.log(selectList)
        this.options = selectList
      }
    }
  },
  computed: {},
  created(){},mounted() {
  }
}
</script>
Copy the code

Matters needing attention:

  1. This parameter is used when defining options dataconstDefine an external oneseletListImmutable data, this is done to avoid infilterSelectMethodMethod to change the input valueopitons; In a real project, it’s data that you get in the background,
  2. Examples of errors are as follows:
// data
options = [
  {
    select: 'option 1'.food: 'Golden cake golden cake golden cake'.cookMethod: 'steam'
  },
  {
    select: 'option 2'.food: 'Double skin milk'.cookMethod: 'fire'
  },
  {
    select: 'option 3'.food: Oyster omelet.cookMethod: 'cook'
  },
  {
    select: 'option 4'.food: 'Dragon beard noodles'.cookMethod: 'cooking'
  },
  {
    select: 'option 5'.food: 'Peking Duck'.cookMethod: 'roast'
  }]

// method
filterSelectMethod(key) {
      console.log(key)
      if (key) {
        // If this is not the case, the values of oitions will be changed to only the filtered values after filtering
        this.options = this.options.filter(
            item= >
                item.food.includes(key) ||
                item.select.includes(key) ||
                item.cookMethod.includes(key)
        )
      } else {
        // 
        this.options = this.options
      }
    }
  },
Copy the code

CSS area

<style scoped>
.select-title {
  margin-bottom: 15px;
  /*margin-top: 15px; * /
}

.option-span {
  display: inline-block;
  padding-right: 5px;
  width: 20%;
}

.option-span-short {
  display: inline-block;
  padding-right: 5px;
  width: 20%;
}

.option-span-long {
  display: inline-block;
}
</style>
Copy the code

Find me

Gitee: gitee.com/heyhaiyon/v…

Wechat official account: Heyhaiyang

The Denver nuggets: heyhaiyang

B: Heyhaiyang

Headline number: Heyhaiyang