zoukankan      html  css  js  c++  java
  • elemenui数据表格加入计数器和输入框

        <!-- 添加药用处方和检查出方的弹出层开始 -->
        <el-dialog  :title="title" :visible.sync="openAddOrderItem" width="1000px" center :close-on-click-modal="false" append-to-body >
    //头部信息可忽略
          <div style="margin:3px;text-align:right">         【{{ submitCareOrder.careOrder.coType==='0'?'药用':'检查' }}】处方总额:¥<span style="color:red">{{ submitCareOrder.careOrder.allAmount }}</span>         <el-button style="margin-left:15px" type="success" icon="el-icon-plus" :disabled="submitCareOrder.careOrderItems.length===0" @click="handleSaveOrderItem">确定添加</el-button>       </div>
    //表格开始
          <el-table border :data="submitCareOrder.careOrderItems" :row-class-name="tableRowClassName">         <el-table-column label="序号" align="center" type="index" width="50" /> //开启序号         <el-table-column :label="submitCareOrder.careOrder.coType==='0'?'药品名称':'项目名称'" align="center" prop="itemName" />         <el-table-column label="数量" width="180px" align="center" prop="num">           <template slot-scope="scope"> //加入计数器             <el-input-number               v-model="scope.row.num"               size="small"               @change="handleCareOrderItemNumChange(scope.row)"             />           </template>         </el-table-column>         <el-table-column label="单价(元)" align="center" prop="price" />         <el-table-column label="金额(元)" align="center" prop="amount" />         <el-table-column label="备注" align="center" prop="remark"> //加入输入框           <template slot-scope="scope">             <el-input               v-model="scope.row.remark"               size="small"             />           </template>         </el-table-column>         <el-table-column label="操作" align="center">           <template slot-scope="scope">             <el-button type="text" icon="el-icon-delete" size="mini" @click="handleCareOrderItemDelete(scope.row)">删除</el-button>           </template>         </el-table-column>       </el-table>       <el-button type="primary" size="mini" style="100%;margin-top:2px" @click="handleOpenAddOrderItemDrawer">添加【{{ submitCareOrder.careOrder.coType==='0'?'药品':'检查' }}】项 </el-button>     </el-dialog>     <!-- 添加药用处方和检查处方的弹出层结束 -->
    data数据----------------

     // 最后要提交到的处方及详情
          submitCareOrder: {
            careOrder: {
              allAmount: 0.00,
              patientId: undefined,
              patientName: undefined,
              coType: '0' // 默认为药用处方
            },
            careOrderItems: []
          },

    方法-----------------
    赋值给careOrderItems大概为[
                 {
                itemName:'分洛1',              
                 num:1,
                  price:5,
                   amount:'50',
                    remerk:'不能出',
                  },{
                itemName:'分洛1',              
                 num:1,
                  price:5,
                   amount:'50',
                    remerk:'不能出',
    
    }
    
    
    

      

    ]
  • 相关阅读:
    Evidence on the impact of sustained exposure to air pollution on life expectancy
    International Immunopharmacology/ Perinatal and early childhood environmental factors influencing allergic asthma immunopathogenesis
    Projections of the effects of climate change on allergic asthma: the contribution of aerobiology
    Word List 2
    GRE : TC21
    Grammar Mistake: What is a faulty tense sequence?
    Biology 02: Respiration
    127 super()方法详解
    128 类的多态和多态性
    126 菱形继承问题
  • 原文地址:https://www.cnblogs.com/javakangkang/p/14002789.html
Copyright © 2011-2022 走看看