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

avatar
作者
筋斗云
阅读量:0

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

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

 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!