• 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>

  • 相关阅读:
    CSS实现背景透明,文字不透明(兼容各浏览器)
    JQUERY SCROLL PATH自定义滚动路径
    Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误)
    truffle的调用nodeJs的问题
    Truffle基础篇-Truffle做什么的?怎么安装?
    以太坊智能合约开发笔记
    day02 智能合约
    remix无法安装的解决方案
    基于eth快速发行自己的数字货币
    remix-ide的三种使用方式
  • 原文地址:https://www.cnblogs.com/lgl1209/p/11772900.html
Copyright © 2020-2023  润新知