Vue + Element ui drop down box el select for additional parameter details

  • 2021-08-06 20:30:31
  • OfStack

Go directly to the code ~


<el-table-column
      label=" User type "
      width="180">
      <template slot-scope="scope">
       <el-select v-model="scope.row.roleID"
             placeholder=" Please select " @change="changeRole($event,scope)">
        <el-option
         v-for="item in roles"
         :key="item.value"
         :label="item.label"
         :value="item.value">
        </el-option>
       </el-select>
      </template>
</el-table-column>

I want to get the value in scope when triggering the drop-down box change event, because the change event of el-select has a callback parameter by default, which is the selected value. If you want to get other values, you can't directly write @ change= "changeRole (scope)", which will override the default parameter, and you can get it with $event.

Not only el-select, but also other components of Element-UI that implement this unwanted default parameter can be used in this way.

Additional knowledge: The change method of the select selector in element UI needs to pass multiple values

If you call the change event directly without passing any parameters, you can get the currently selected value (because the event parameters are passed by default)

Scenario:

Do you need to pass the select selector "selected current element" and "other values you need" 1 at a time?

Practice:

change ($event, "other values you want to pass")


Related articles: