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

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

html 复制代码
<!-- 表格模块 -->
<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>
javascript 复制代码
// #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
相关推荐
Stringzhua6 分钟前
Vue中的数据渲染【4】
css·vue.js·css3
阿珊和她的猫4 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
gnip9 小时前
vite和webpack打包结构控制
前端·javascript
草梅友仁10 小时前
草梅 Auth 1.4.0 发布与 ESLint v9 更新 | 2025 年第 33 周草梅周报
vue.js·github·nuxt.js
烛阴11 小时前
前端必会:如何创建一个可随时取消的定时器
前端·javascript·typescript
萌萌哒草头将军12 小时前
Oxc 最新 Transformer Alpha 功能速览! 🚀🚀🚀
前端·javascript·vue.js
武昌库里写JAVA12 小时前
JAVA面试汇总(四)JVM(一)
java·vue.js·spring boot·sql·学习
1024小神13 小时前
nextjs项目build导出静态文件
前端·javascript
parade岁月13 小时前
JavaScript 日期的奇妙冒险:当 UTC 遇上 el-date-picker
javascript
是一碗螺丝粉13 小时前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序