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="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:'不能出',

}
 
         

  

]

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM