element table配合from实现双击可编辑表格

简介: 如何使用Element UI的el-table和el-form组件实现双击可编辑的表格。

直接贴代码

<template>
  <el-table :data="tableData" border style="width: 90%;margin:0 auto" @row-dblclick="dbclick">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名" align="center">
      <template slot-scope="scope">
        <el-form :model="scope.row">
          <el-form-item size="mini">
            <el-input v-if="scope.row.isOK" v-model="scope.row.name"></el-input>
            <span class="spspsp" v-else>{
  {scope.row.name}}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址" align="center">
      <template slot-scope="scope">
        <el-form :model="scope.row">
          <el-form-item size="mini">
            <el-input v-if="scope.row.isOK" v-model="scope.row.address"></el-input>
            <span class="spspsp" v-else>{
  {scope.row.address}}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          isOK: true,
          name: "张三",
          address: "上海市普陀区金沙江路 1518 弄",
          id: 1
        },
        {
          date: "2016-05-02",
          isOK: false,
          name: "李四",
          address: "上海市普陀区金沙江路 1518 弄",
          id: 2
        }
      ]
    };
  },
  mounted() {},
  methods: {
    dbclick(row, event, column) {
      console.log(row);
      row.isOK = !row.isOK;
      let obj = this.tableData.find(i => {
        return i.id == row.id;
      });
    }
  }
};
</script>
<style  scoped>
</style>
目录
相关文章
|
JavaScript 前端开发
VUE element-ui之table表格自增序号(前端实现)
VUE element-ui之table表格自增序号(前端实现)
2077 0
|
JavaScript
VUE element-ui之table表格横向展示(表尾汇总)
VUE element-ui之table表格横向展示(表尾汇总)
2013 0
VUE element-ui之table表格横向展示(表尾汇总)
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
2382 0
|
Java 数据库连接 数据库
探究Java中的MyBatis Plus注解 @TableField:灵活处理字段映射与自动填充
在数据库操作中,字段映射和字段填充是开发者经常需要处理的问题。MyBatis Plus作为一款优秀的ORM框架,提供了注解 `@TableField`,能够帮助开发者更加灵活地处理字段映射,以及在特定场景下实现自动填充功能。本文将深入探讨 `@TableField` 注解的用法及其在持久层开发中的应用。
5521 1
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9112 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
3244 0
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
907 6
|
SQL 关系型数据库 MySQL
解决:Mybatis-plus向数据库插入数据的时候 报You have an error in your SQL syntax
该博客文章讨论了在使用Mybatis-Plus向数据库插入数据时遇到的一个常见问题:SQL语法错误。作者发现错误是由于数据库字段中使用了MySQL的关键字,导致SQL语句执行失败。解决方法是将这些关键字替换为其他字段名称,以避免语法错误。文章通过截图展示了具体的操作步骤。
el-drawer抽屉组件弹窗遮挡问题解决
el-drawer抽屉组件弹窗遮挡问题解决
817 3

热门文章

最新文章