iview-select 鼠标移入option，显示对应操作

目标效果：

实现细节：（模版写法）

<template>
  <Select
    v-model="selectObj"
    filterable
    clearable
    style="width: 300px;"
  >
    <OptionGroup label="--- 测试1 ---">
      <Option
        v-for="item in selectOptions1"
        :value="item.value"
        :label="item.label"
        :key="item.value"
      >
        <div @mouseenter="enter(item.value)" @mouseleave="leave()">
          {{ item.label }}
          <a
            v-if="seen && item.value == current"
            style="float: right;"
            @click="detail(item.value)"
            >详情</a
          >
        </div>
      </Option>
    </OptionGroup>
    <OptionGroup label="--- 测试2 ---">
      <Option
        v-for="item in selectOptions2"
        :value="item.value"
        :label="item.label"
        :key="item.value"
      >
        <div @mouseenter="enter(item.value)" @mouseleave="leave()">
          {{ item.label }}
          <a v-if="seen && item.value == current" style="float: right;">详情</a>
        </div>
      </Option>
    </OptionGroup>
  </Select>
</template>
<script>
export default {
  data() {
    return {
      seen: false,
      current: 0,
      selectObj: '',
      selectOptions1: [
        {
          label: 'test1',
          value: 1,
        },
        {
          label: 'test2',
          value: 2,
        },
        {
          label: 'test3',
          value: 3,
        },
        {
          label: 'test4',
          value: 4,
        },
      ],
      selectOptions2: [
        {
          label: 'test5',
          value: 5,
        },
        {
          label: 'test6',
          value: 6,
        },
        {
          label: 'test7',
          value: 7,
        },
      ],
    }
  },
  methods: {
    enter(key) {
      this.seen = true
      this.current = key
    },
    leave() {
      this.seen = false
      this.current = null
    },
    detail(val) {
      console.log('点击的option_id为：', val)
    },
  },
}
</script>

<style scoped>
</style>

实现细节：（render渲染）

<template>
  <div>
    <Table border :columns="columns7" :data="data6"></Table>
    <br>
    <div style="text-align: center;">
      <Button type="primary" @click="submit">提交</Button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns7: [
        {
          title: 'Name',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person',
                },
              }),
              h('strong', params.row.name),
            ])
          },
        },
        {
          title: 'Age',
          key: 'age',
        },
        {
          title: 'address',
          render: (h, params) => {
            const _self = this
            return h(
              'Select',
                {
                  // 用例
                  props: {
                    value: params.row.id,
                    filterable: true,
                    transfer: true
                  },
                  on: {
                    'on-change': (value) =>
                      _self.changeSelect(params.row._index, value)
                  },
                },
                [
                  h(
                    'OptionGroup',
                    {
                      props: {
                        label: '国外地址',
                      },
                    },
                    
                    _self.ForeignAddress.map(function(selectData) {
                      return h(
                        'Option',
                        {
                          props: { 
                            value: selectData.id,
                            label: selectData.label,
                            // key: selectData.id
                          },
                        }, 
                        [
                          h('div', {
                            on: {
                              'mouseenter': () => {
                                _self.enter(selectData.id)
                              },
                              'mouseleave': () => {
                                _self.leave()
                              }
                            }
                          }, [
                            h('span',{
                              style: {
                                display: 'inline-block',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                whiteSpace: 'nowrap',
                                maxWidth: '90%'
                              }
                            }, selectData.label),
                            h('a',{
                              style: {
                                display: (_self.seen && selectData.id === _self.current) ?  'inline-block' : 'none',
                                float: 'right'
                              },
                              on: {
                                'click': (e) => {
                                  e.stopPropagation() // 阻止事件冒泡
                                  _self.detail(selectData.id)
                                }
                              }
                            }, '详情')
                          ])
                        ],
                        // selectData.label
                      )
                    })
                  ),
                  h(
                    'OptionGroup',
                    {
                      props: {
                        label: '国内地址',
                      },
                    },
                    _self.DomesticAddress.map(function(selectData) {
                      return h(
                        'Option',
                        {
                          props: { 
                            value: selectData.id,
                            label: selectData.label,
                            // key: selectData.id
                          },
                        }, 
                        [
                          h('div', {
                            on: {
                              'mouseenter': () => {
                                _self.enter(selectData.id)
                              },
                              'mouseleave': () => {
                                _self.leave()
                              }
                            }
                          }, [
                            h('span',{
                              style: {
                                display: 'inline-block',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                whiteSpace: 'nowrap',
                                maxWidth: '90%'
                              }
                            }, selectData.label),
                            h('a',{
                              style: {
                                display: (_self.seen && selectData.id === _self.current) ?  'inline-block' : 'none',
                                float: 'right'
                              },
                              on: {
                                'click': (e) => {
                                  e.stopPropagation() // 阻止事件冒泡
                                  _self.detail(selectData.id)
                                }
                              }
                            }, '详情')
                          ])
                        ],
                        // selectData.label
                      )
                    })
                  )
                ]
            )
          },
        },
        {
          title: 'Action',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    },
                  },
                },
                'View'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    },
                  },
                },
                'Delete'
              ),
            ])
          },
        },
      ],
      seen: false,
      current: 0,
      data6: [
        {
          name: 'John Brown',
          age: 18,
          id: '1',
        },
        {
          name: 'Jim Green',
          age: 24,
          id: '2',
        },
        {
          name: 'Joe Black',
          age: 30,
          id: '4',
        },
        {
          name: 'Jon Snow',
          age: 26,
          id: '5',
        },
        {
          name: 'Seven One',
          age: 26,
          id: '',
        },
      ],
      ForeignAddress: [
        {
            id: '1',
            label: 'New York',
            type: 'foreign'
        },
        {
            id: '2',
            label: 'London',
            type: 'foreign'
        },
        {
            id: '3',
            label: 'Sydney',
            type: 'foreign'
        }
      ],
      DomesticAddress: [
        {
            id: '4',
            label: '浙江',
            type: 'domestic'
        },
        {
            id: '5',
            label: '北京',
            type: 'domestic'
        },
        {
            id: '6',
            label: '湖北',
            type: 'domestic'
        }
      ],
    }
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>id：${this.data6[index].id}`,
      })
    },
    remove(index) {
      this.data6.splice(index, 1)
    },
    enter (key) {
      this.seen = true
      this.current = key
    },
    leave () {
      this.seen = false
      this.current = null
    },
    detail (val) {
      // 判断属于那个option
      var curSelect = this.DomesticAddress.concat(this.ForeignAddress).find(t => t.id === val)
      console.log(curSelect)
      // 详情跳转
    },
    changeSelect(index, value) {
      this.data6[index].id = value
    },
    submit () {
      console.log(this.data6)
    }
  },
}
</script>