• elementUi前端框架遇到的问题


    1.  使用element-ui表格列表中的每一项添加下拉菜单

      效果图一:效果图二:

      代码:

        <el-table>   

         <el-table-column label="操作">
          <template slot-scope="scope">
           <el-dropdown trigger="click" @visible-change="handleVisibleVsim($event, scope)">
            <span class="el-dropdown-link el-button--lightblue dropbutton">
             <i class="iconfont icon-operate" style="color: #aab4bd"></i>
            </span>
           <!--  下拉框里面的内容 -->
           <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="view_detail" @click.native="view(scope)">查看详情</el-dropdown-item>
             <el-dropdown-item command="edit" :disabled="edit_flag" @click.native="edit(scope)">编辑</el-dropdown-item>
             <el-dropdown-item command="disab_enab">启用/停用</el-dropdown-item>
             <el-dropdown-item command="diagnosis" @click.native="diagnosis(scope)">诊断</el-dropdown-item>
            </el-dropdown-menu>
           </el-dropdown>
          </template>

        </el-table>

    2.  表头添加下拉菜单

    效果图:

    代码:

      <el-table-column width="110" label="托管状态" property="simState" :show-overflow-tooltip="true">
        <template slot="header" slot-scope="scope">
           // @command="stateNameCommand"  方法中接收一个参数就可以获取到command的值是多少
          <el-dropdown trigger="click" @command="stateNameCommand">
            <span class="el-dropdown-link">
              托管状态<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="">全部</el-dropdown-item>
            <el-dropdown-item command="0">未注册</el-dropdown-item>
            <el-dropdown-item command="2">注册失败</el-dropdown-item>
            <el-dropdown-item command="3">已注册</el-dropdown-item>
            <el-dropdown-item command="-1">已注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      // 这是列表中的回显的字段数据
           <template slot-scope="scope">
               <span v-text='scope.row.simState==0?"未注册":scope.row.simState==1?"注册中":scope.row.simState==2?"注册失败":scope.row.simState==3?"已注册":scope.row.simState==-1?"已注销":"--"'>      </span>
            </template>
       </el-table-column>

    3.  多选框中绑定了label回显示出北京文字,所以让北京两字不显示

      效果图:

      这是官网上的案列,但我只想要多选框,不想要多选框后面的问题,解决办法如下

      <el-chexkbox v-model="" :label="" :key="">{{&nbsp;}}</el-checkbox>

    4.  下拉菜单(第一个小题)中想根据数据中某个字段来判断是否可点击进行跳转

      根据api中visible-change       /下拉框出现/隐藏是触发

      在第一个小题中蓝色加粗的标记就是这个方法,在js中直接写出来,在打印传的参数即可明白怎么做。

    5.  element表格超出一行怎么设置

      <el-table-column width="110" label="托管状态" property="simState" :show-overflow-tooltip="true"></el-table-column>

  • 相关阅读:
    Spring、实例化Bean的三种方法
    Spring、编码剖析Spring管理Bean的原理
    Spring、Hello Spring
    Spring、控制反转与依赖注入(概念)
    Hibernate、批量操作数据
    Hibernate、3.6.7在线帮助文档
    Hibernate、乐观锁和悲观锁
    JQuery UI 精品UI推荐
    java 为pdf添加水印图片
    Hibernate 、继承关联映射
  • 原文地址:https://www.cnblogs.com/lgl1209/p/11772900.html
Copyright © 2020-2023  润新知