工艺流程 下拉显示一个列表

<template>
  <el-form-item :label="工艺流程" :prop="flowName">
    <el-select
      :value="selected"
      :placeholder="placeholder"
      popper-class="select-options_table"
      clearable
      filterable
      default-first-option
      style="width: 100%"
      @change="selectChange"
    >
      <li class="option-header">
        <span>工艺编码</span>
        <span>工艺名称</span>
        <span>版本编码</span>
      </li>
      <el-option
        v-for="item in flowList"
        :key="item.id"
        :label="item.flowName"
        :value="item.id"
        class="select-option_li"
      >
        <span>{{ item.flowCode }}</span>
        <span>{{ item.flowName }}</span>
        <span>{{ item.versionCode }}</span>
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>

export default {
  name: 'SelectName',
  model: {
    prop: 'selected',
    event: 'select-event'
  },
  props: {
    prop: String,
    label: {
      type: String,
      default: '姓名'
    },
    placeholder: {
      type: String,
      default: '请选择姓名'
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    selected: {
      type: String,
      value: ''
    }
  },
  data() {
    return {
      tableData: tableData
    }
  },
  created() {
    this.tableData.map((item, i) => {
      item.index = i
      return item
    })
  },
  methods: {
    selectChange(val) {
      if (val === '') return this.$emit('select-event', val)
      const nameList = this.tableData.find(item => item.index === val)
      this.$emit('select-event', nameList.name)
      this.$emit('change', nameList)
    }
  }
}
</script>

<style lang="less" scoped>
.select-options_table {
  span {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
  }
  .select-option_li {
    padding: 0;
  }
  .option-header {
    background: #ffddbb;
  }
}
</style>