在table表格中实现文字可编辑修改

科技前沿 • 2025-01-08 18:40 • 阅读 61

大家好，我是讯享网，很高兴认识大家。

在table中点击某一个表格的单元格点击文字实现文字变成输入框 ,实现可修改的功能

具体思路:

1. 可在单元格内写入俩个标签用v-if 和v-else 进行控制

2. 俩个标签的值都是以单元格的绑定的值为准

3. 在要编辑的文字标签上加上点击事件来控制他的显示隐藏, 变成一个可编辑的输入框

讯享网

4.将编辑好的输入框变成原来的文字

这里一定要注意, 记得多写个判断,不能为空,为空的话下次再点击修改就在点不出来了

<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop="date" label="日期" sortable width="180"></el-table-column> <el-table-column prop="name" label="姓名" sortable width="180"> <template slot-scope="scope" > <el-input v-if="scope.row.isshow" v-model="scope.row.name" @focus="focusOperate(scope.row)" @blur="blurOperate(scope.row)"/> <span @click="showname(scope.row)" v-else>{ 
  
    
  {scope.row.name}}</span> </template> </el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <script> // js部分 export default { data(){ return{ tableData: [{ id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', isshow:false }, { id: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', isshow:false }, { id: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', isshow:false, children: [{ id: 31, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', isshow:false }, { id: 32, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', isshow:false }] }, { id: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', isshow:false }], } }, methods:{ showname(row){ console.log(row) row.isshow = true }, //隐藏输入框 blurOperate(row){ if (row.name !== row.oldName && row.name) { this.$message({ message: '修改成功', type: 'success', duration: 1000 }) row.isshow = false } } } } </script>

讯享网

在table表格中实现文字可编辑修改

相关推荐