element ui 点击输入框下方弹出 表格

注意：可能会出现单选框和后续表格行错位的情况 是fix引起 随便 可以把其他列加宽点可取消这影响 或者你不要fix的单选列 效果如图

html内

 <el-col :span="4">
                <div @click="cleValidate('ProductCode')">//自定义位置取消警告
                  <el-form-item label="货品编码" prop="ProductCode">
                    <el-popover
                      v-model="selVisible"//控制下拉框的显示
                      placement="bottom-start"//默认属性不动
                      trigger="click" //默认属性不动
                    >
                      <selectGoods  //vue的自定义表格组件
                        ref="selectGoods"
                        :multi="multi" //传入多选单选模型  0/1
                        style="width: 100%; height: 50vh"
                        @singleSel="selectGoods"  //单选返回方法
                      />
                      <div slot="reference">
                        <el-input
                          v-model="formdata.ProductCode"
                          placeholder="请输入货品编码"
                          clearable
                          size="small"
                        />
                      </div>
                    </el-popover>
                  </el-form-item>
                </div>
              </el-col>

vue data

 multi: 0, // 单复选模式
 selVisible: false, // 下拉选择框的显示

method内

下面的方法能获得我们需要的值 然后将对应的值赋值给当前vue实例内就可以

 // 选择一个商品
    //下拉选择仓库获得的结果
     selectStore(val) {
       console.log(val);
      let selctResult = val;
      // 以上部分每次只需要变ref后面的钩子名
      this.formdata.storecode = selctResult.storecode
      this.formdata.storename = selctResult.storename
      this.formdata.storeid = selctResult.id
      // 以上部分为获取值
      this.selVisible = false // 关闭下拉框
      this.$refs.formdata.clearValidate('storename')
    },
 // 调整了验证文字的位置造成 验证文字挡住输入
    cleValidate(val) {
      this.$refs.formdata.clearValidate(val)
    }

非必要 将element的错误提示放到输入框内部 css内

/**修改错误提示 */
::v-deep .el-form-item__error {
  top: 0;
  background: #fff;
  height: 30px;
  margin-top: 5px;
  margin-left: 5px;
  width: 120px;
  display: flex;
  align-items: center;
  // display: flex;
  // flex-wrap: wrap ;
}

然后是用于显示的选择表格的组件

只写关键部分了

<el-table
        ref="selPwProcess"
        v-loading="listLoading"
        :data="lst"
        element-loading-text="Loading"
        border
        fit
        height="400px"
        highlight-current-row
        style="overflow: auto"
        :header-cell-style="{
          background: '#F3F4F7',
          color: '#555',
          padding: '3px 0px 3px 0px',
        }"
        :cell-style="{ padding: '4px 0px 4px 0px' }"
      >
        <!-- ---复选列--- -->
        <el-table-column
          v-if="multi == 1"
          fixed="left"
          type="selection"
          width="55"
        />
        <!-- ---单选列--- -->
        <el-table-column v-else label="" width="40" fixed>
          <template scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ " " }}</el-radio>
          </template>
        </el-table-column>
        中间的列随便加
         </el-table>

//子组件内获取单选内容
getCurrentRow(row) {
      console.log('ssssssss', row)
      //this.$forceUpdate()
      // singleSel
      this.$emit('singleSel', row)
      this.selrows = row
    },

额附加个验证表单

 data() {
    //修改项 如果有特殊验证 调用
     const validateStorename = (rule, value, callback) => {
      if (!this.formdata.storename) {
        // 原始  if (!validUsername(value)) {
        callback(new Error('请选择仓库'))
      } else {
        callback()
      }
    }
  formRules: {
        //复杂验证模式
         storename: [
          { required: true, trigger: "blur", validator: validateStorename }, //change触发多用在选择组件
        ],
        // storename: [
        //   { required: true, trigger: "blur", message: "仓库名称不能为空" },
        // ],
      },