vue element ui Dropdown下拉菜单 command方法使用(获取某行数据)

需求：

dropdown 下拉菜单，如何获取当前点击下拉菜单的这行数据？

最终效果图

效果图

第一种方法：

区别：通过command方法直接传当前选中行的整个数据

<el-table>
  <el-table-column label="操作" width="100">
      <template slot-scope="scope">
         // @command="command=>方法名(command,你想传的其它参数)"
         <el-dropdown @command="(command)=>{handleCommand(command, scope.row)}">  // 主要这行代码
            <el-button type="primary" size="mini" v-permission="'subscribe.reserve.operate'">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="sendModifyData">修改预约日期</el-dropdown-item>
               <el-dropdown-item command="sendModifyTel">修改电话号码</el-dropdown-item>
               <el-dropdown-item command="sendModifyRemark">修改备注</el-dropdown-item>       
            </el-dropdown-menu>                                                                                              
          </el-dropdown>
       </template>
   </el-table-column>
</el-table>

// 这里是ts的语法，js的直接按js的语法来就可以了

<script lang="ts">
  import { Vue, Component } from "vue-property-decorator";
  export default class OrderList extends Vue
{
  /**
   * 当前操作的菜单
   * @protected
   * @returns string
   */
    protected orderId: number = null;
    protected orderNo: string = "";
    protected memberId: number = null;  // 修改预约电话人员id

    /**
     * 操作
     * @protected
     * @returns any
     */
    protected async handleCommand(command: string, row: any): Promise<any>
        {
            // 获取当前点击下拉菜单的这行数据，根据拿到的数据进行下一步操作
            // console.log(row);
            this.orderId = row.OrderId;
            this.orderNo = row.OrderNo;
            this.memberId = row.Member_id;
        }
  }
</script>

第二种方法：

区别：通过操作当前选中行按钮来获取这行的数据

<el-table-column label="操作" width="100">
   <template slot-scope="scope">
       <el-dropdown @command="handleCommand">
           // 通过操作当前选中行按钮来获取这行的数据
           // 如果这里点击事件不生效的话，加修饰符 @click.native
           <el-button type="primary" size="mini" @click="operateClick(scope.row)">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
           <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="sendModifyData">修改预约日期</el-dropdown-item>
                  <el-dropdown-item command="sendModifyTel">修改电话号码</el-dropdown-item>
                  <el-dropdown-item command="sendModifyRemark">修改备注</el-dropdown-item>      
           </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

// 获取当前点击下拉菜单的这行数据，根据拿到的数据进行下一步操作
/**
 * 操作 获取数据
 * @protected
 * @return string
 */
  protected orderId: string = "";
  protected OrderNo: string = "";
  protected memberId: string = "";  // 修改预约电话人员id

/**
 * 操作 获取数据
 * @protected
 * @return string
 */
 protected async operateClick(row): Promise<any>
 {
            // console.log(row);
            this.orderId = row.OrderId;
            this.OrderNo = row.OrderNo;
            this.memberId = row.Member_id;
  }

最后编辑于：2020.10.22 17:29:42