<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
<template #default="{row,$index}">
<input type="text" v-model="row.date" v-show="row.display" />
<span v-show="!row.display">{{row.date}}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="{row,$index}">
<el-button type="warning" @click="edit(row)">编辑</el-button>
<el-button type="danger" @click="save(row)">保存</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎'
}, {
date: '2016-05-04',
name: '王小虎'
}]
}
},
methods: {
edit(row, index) {
row.display = true;
},
save(row, index) {
row.display = false;
}
}
}
</script>
【vue3】可编辑el-table
陈晓明start2023-10-10 11:21
相关推荐
康一夏38 分钟前
React面试题,封装useEffect❆VE❆1 小时前
WebSocket与SSE深度对比:技术差异、场景选型及一些疑惑ConardLi1 小时前
SFT、RAG 调优效率翻倍!垂直领域大模型评估实战指南over6972 小时前
🌟 JavaScript 数组终极指南:从零基础到工程级实战源猿人2 小时前
前端批量请求的并发控制与工程化实践weipt3 小时前
关于vue项目中cesium的地图显示问题懒大王、3 小时前
Vue3 + OpenSeadragon 实现 MRXS 病理切片图像预览zhengxianyi5153 小时前
ruoyi-vue-pro数据大屏优化——在yudao-module-report-app使用yudao-moudle-sso优化单点登录诗意地回家3 小时前
淘宝小游戏反编译徐同保3 小时前
react两个组件中间加一个可以拖动跳转左右大小的功能