vue el-select下拉选择框中显示tabel表格

此方法适用于下拉多选，单选需自主调整（可通过选择tabel列表做限制）

html部分：

        <el-select v-model="selectId" multiple placeholder="请选择" style="width: 200px">
         <!-- 直接写入tabel表格 -->
          <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="date" label="日期" width="120"/>
            <el-table-column prop="name" label="姓名" width="120"/>
          </el-table>
         <!-- 隐藏原有下拉列表 -->
          <el-option v-show="false" v-for="(item, index) in tableData" :key="index" :label="item.name"
            :value="item.id" />
        </el-select>

js部分 - 变量：

      selectId: '', // 下拉选择框绑定的model
      tableData: [{ // 下拉table数据
        id:0,
        date: '2016-05-03',
        name: '王小虎1',
      }, {
        id:1,
        date: '2016-05-02',
        name: '王小虎2',
      }, {
        id:2,
        date: '2016-05-04',
        name: '王小虎3',
      }, {
        id:3,
        date: '2016-05-01',
        name: '王小虎4',
      }],

js部分 - 事件：

    handleSelectionChange(val) {
      // 选择列表中的复选框后 改变下拉框绑定的model
      this.selectId = val.map(item => {
        return item.id
      })
    },