vue.js - element的select组件中change事件该如何编写？

问题描述

问 题

在用vue搭建后端系统时，需要将数据库中所有用户信息显示在table表格中，然后再在table表格中的权限列添加一个select组件，希望可以通过选中select下的值来更改数据库中相应的值。但是该如何书写这个change事件，我就觉得力不从心、无法下手了。

html部分代码：

     <el-table-column prop="level" label="权限"  width="200px" >
       <template scope="scope">
         <el-select  v-model="scope.row.level" ref="scope.row.level" @change="getlevel()" >
           <el-option v-for="item in items"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
            </el-option>
         </el-select>
       </template>
     </el-table-column>

js部分代码：

          items: [{
            value: '0',
            label: '游客'
          }, {
            value: '1',
            label: '作者'
          }, {
            value: '2',
            label: '管理员'
          }],
          value: ''

解决方案

<el-select v-model="value" placeholder="请选择" @change="getlevel">
   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
   </el-option>
</el-select>

 methods: {
   getlevel(val) {
     console.log(val)
   },
 },

用element示例测试的，可以直接拿到选中的值，你只需要在method里面写你的逻辑就好了啊

这篇关于vue.js - element的select组件中change事件该如何编写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！