Note: there may be a mismatch between the checkbox and the subsequent table rows. If the fix causes this, you can make the other columns wider to cancel this effect or you do not want to fix the checkbox columns

Within the HTML

 <el-col :span="4">
                <div @click="cleValidate('ProductCode')">// Custom location cancel warning<el-form-item label="Item Code" prop="ProductCode">
                    <el-popover
                      v-model="selVisible"// Control the display of the drop-down boxplacement="bottom-start"// The default property is not changedtrigger="click"// Default property not set >
                      <selectGoods  //vueCustom table component for theref="selectGoods"
                        :multi="multi"// Pass in the multiple radio model0/1
                        style="width: 100%; height: 50vh"
                        @singleSel="selectGoods"// return method />
                      <div slot="reference">
                        <el-input
                          v-model="formdata.ProductCode"
                          placeholder="Please enter the item code"
                          clearable
                          size="small"
                        />
                      </div>
                    </el-popover>
                  </el-form-item>
                </div>
              </el-col>
Copy the code
vue data

 multi: 0.// Single check mode
 selVisible: false.// Drop down the selection box display
Copy the code

In the method

The following method takes the value we need and assigns it to the current VUE instance

 // Select an item
    // Drop down the selection of the warehouse to get the result
     selectStore(val) {
       console.log(val);
      let selctResult = val;
      // We only need to change the hook name after ref
      this.formdata.storecode = selctResult.storecode
      this.formdata.storename = selctResult.storename
      this.formdata.storeid = selctResult.id
      // The above part is to get the values
      this.selVisible = false // Close the drop-down box
      this.$refs.formdata.clearValidate('storename')},// Adjusted the position of the validation text to block the input
    cleValidate(val) {
      this.$refs.formdata.clearValidate(val)
    }
Copy the code

It is not necessary to place element’s error message inside the input box CSS

/** Modify error message */
::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 ;
}
Copy the code

Then there are the components for the selection table to display

Only the key part

<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' }"> <! -- --- check column --- --><el-table-column
          v-if="multi == 1"
          fixed="left"
          type="selection"
          width="55"
        /><! -- --- optional column --- --><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>Copy the code
// Get radio content in child component
getCurrentRow(row) {
      console.log('ssssssss', row)
      //this.$forceUpdate()
      // singleSel
      this.$emit('singleSel', row)
      this.selrows = row
    },
Copy the code

A validation form is attached

 data() {
    // Modify the item if there is a special validation call
     const validateStorename = (rule, value, callback) = > {
      if (!this.formdata.storename) {
        // Primitive if (! validUsername(value)) {
        callback(new Error('Please select warehouse'))}else {
        callback()
      }
    }
  formRules: {
        // Complex validation mode
         storename: [{required: true.trigger: "blur".validator: validateStorename }, // The change trigger is used to select components].// storename: [
        // {required: true, trigger: "blur", message: "Warehouse name cannot be empty"},
        / /,
      },    
Copy the code