首页 > 技术文章 > elemenui数据表格加入计数器和输入框

javakangkang 2020-11-18 23:01 原文

    <!-- 添加药用处方和检查出方的弹出层开始 -->
    <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="width: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:'不能出',

}

  

]

 

推荐阅读