veu使用element UI 表格问题

最新推荐文章于 2024-03-27 15:06:04 发布

浪里白条那片海

最新推荐文章于 2024-03-27 15:06:04 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

分类专栏： css js vue 文章标签： vue element UI

本文链接：https://blog.youkuaiyun.com/weixin_37806077/article/details/84555944

vue 同时被 3 个专栏收录

45 篇文章

订阅专栏

23 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文介绍了一种用于管理商品价格的表格设计，包括商品名称、规格、生产企业、剂型、公司标准价、省区定价和实际价格等字段。通过输入框实时更新价格，并根据不同情况显示颜色提示，便于操作者快速识别价格变动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="table_wrap">
 <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" max-height="530">
     <el-table-column prop="goodsName" label="商品名称"></el-table-column>
     <el-table-column prop="specsMax" label="规格"></el-table-column>
     <el-table-column prop="manufacturer" label="生产企业"></el-table-column>
     <el-table-column prop="drugType" label="剂型"></el-table-column>
     <el-table-column prop="standPrice" label="公司标准价"></el-table-column>
     <el-table-column prop="fixedPrice" label="省区定价"></el-table-column>
     <el-table-column prop="fewPrice" label="价格">
      <template slot-scope="scope">
       <input
              v-model.trim="scope.row.fewPrice"
              @change="handleChange(scope.row,'fewPrice')"
              @keydown="handleInput2"
              @keyup="handleInput2"
              :class="{'tableInput': true, 'color_red' : scope.row.fixedPrice < scope.row.fewPrice, 'color_blue' : scope.row.fixedPrice > scope.row.fewPrice}"></input>
   </template>
     </el-table-column>
     <el-table-column prop="address" label="操作">
      <template slot-scope="scope">
          <div class="operateBtn" @click="showChangePriceLog(scope.row.priceId, scope.row.position, scope.row.goodsId)">改价日志</div>
      </template>
     </el-table-column>
   </el-table>
</div>