Vue + element-UI可编辑表格的使用

最新推荐文章于 2025-01-22 14:19:23 发布

原创最新推荐文章于 2025-01-22 14:19:23 发布 · 744 阅读

1 ·

CC 4.0 BY-SA版权

VUE 同时被 3 个专栏收录

5 篇文章

订阅专栏

前端学习

4 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element-UI组件库实现可编辑的表格功能，详细展示了表格列中金额字段的编辑操作，包括输入框的使用、事件监听及数据格式化。

Vue + element-UI可编辑表格的使用

<el-table>
  <el-table-column label="金额(万元)" align="center" prop="amountmoney">
     <template slot-scope="scope">
         <el-input class="input-with-select" slot-size="small" @blur="numblur(scope.$index,scope.row,$event,3)"
             @input="onInput3(scope.$index, scope.row,$event)" :value="formatNum(scope.row.amountmoney)"
             placeholder="请输入内容" @change="purposeEdit(scope.$index, scope.row)">
         </el-input>
         <span>{{formatNum(scope.row.amountmoney)}}</span>
     </template>
   </el-table-column>
</el-table>