当前位置:   article > 正文

Vue3与Element-plus配合 直接修改表格中的一项数据——控制输入框的显示与隐藏_vue3 elementplus 修改table的单独项的值

vue3 elementplus 修改table的单独项的值

 利用控制与隐藏输入框,直接修改表格中的每一项数据。

  1. <!-- 表格模块 -->
  2. <div>
  3. <el-table :data="tablelist" style="width: 100%">
  4. <el-table-column align="center" prop="deposit" label="接单押金">
  5. <template #default="{ row, $index }">
  6. <span v-if="!showEdit[$index]">{{ row.deposit }}</span>
  7. <div v-else style="margin-left: 200px; width: 100px">
  8. <el-input v-model="row.deposit" placeholder="请输入分类名"></el-input>
  9. </div> </template
  10. ></el-table-column>
  11. <el-table-column align="center" label="操作">
  12. <template #default="{ row, $index }">
  13. <!-- 编辑 -->
  14. <el-button
  15. v-if="!showEdit[$index]"
  16. type="primary"
  17. @click="Edit(row, $index)"
  18. plain
  19. >编辑</el-button
  20. >
  21. <!-- 编辑确认 -->
  22. <el-button v-else type="primary" @click="sure(row, $index)" plain
  23. >确认</el-button
  24. >
  25. </template>
  26. </el-table-column>
  27. </el-table>
  28. </div>
  1. // #region *****************点击编辑控制输入框显示与关闭模块****************
  2. const showEdit = ref<boolean[]>([])
  3. // 编辑处理
  4. const Edit = (row: any, index: any) => {
  5. //vue3使用数组添加数据
  6. showEdit.value[index] = true
  7. }
  8. // #endregion
  9. // #region *****************确认编辑模块****************
  10. const sure = async (row: any, index: any) => {
  11. console.log(row)
  12. showEdit.value[index] = false
  13. // 表单预校验
  14. // await form.value.validate()
  15. // 发起修改请求
  16. // await updatePageClassServe(row).then(() => {
  17. // ElMessage.success('修改成功!')
  18. // showEdit.value = []
  19. // })
  20. // 重新获取分类数据,渲染页面
  21. // getChannelList()
  22. }
  23. // #endregion

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/904279
推荐阅读
相关标签
  

闽ICP备14008679号