vue element-ui table点击编辑后，变成input、select、date

Baifu paste

已于 2022-10-31 15:35:33 修改

阅读量3k

点赞数

分类专栏： javascript vue 文章标签： 1024程序员节

于 2022-10-24 14:29:27 首次发布

本文链接：https://blog.csdn.net/qq_28586135/article/details/127489062

版权

javascript 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

vue

33 篇文章 1 订阅

订阅专栏

本文展示了如何在Vue.js项目中创建一个具有行内编辑功能的表格，包括将表格列转换为输入框、下拉选择和日期选择器，并实现编辑和保存操作。通过切换变量实现编辑模式的切换，同时提供了删除功能。示例代码详细说明了这一过程。

摘要由CSDN通过智能技术生成

最近，在项目上需要table可以行内编辑，在table添加了input、select、时间控件，并且可以保存本行数据，当你点击编辑时，table的列就会变成相对应的input、select和时间控件，点击保存时，需要调用后台接口把本行的数据传个后台。
在这里插入图片描述

<template>
    <div class="Table" style="width:80%; margin:0 auto;">
      <el-table :data="prototypes" style="width: 100%;">
        <!-- 序号栏目 type="index" -->
        <el-table-column 
          fixed
          type="index" 
          label="序号" 
          width="100"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="name"
          label="姓名"
          width="120"
        >
        </el-table-column>
        <!-- 此页重点部分  编辑之前以span形式显示，点击编辑之后，以input栏目显示 -->
        <el-table-column label="地址" width="380">
          <template slot-scope="scope">
            <span v-if="scope.row.vVisible">{{scope.row.city}}</span>
            <el-input v-else v-model="scope.row.city"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="380">
          <template slot-scope="scope">
            <span v-if="scope.row.vVisible">
              <span v-if="scope.row.sex == '0'">
                男
              </span>
              <span v-else>
                女
              </span>
            </span>
            <el-select v-else v-model="scope.row.sex" clearable  >
              <el-option
                v-for="item in sexes"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="日期" width="380">
          <template slot-scope="scope">
            <span v-if="scope.row.vVisible">{{scope.row.dateValue}}</span>
            <el-date-picker
              v-else
              v-model="scope.row.dateValue"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <div class="special">
              <span v-if="scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
              <span v-else class="items" @click="edit(scope.row)">保存</span>
              <span>|</span>
              <span class="items" @click="deleteit(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
  
  <script>
  export default {
    data() {
        return{
            // 表格绑定的数据
            prototypes:[{
                name: '王小虎',
                city: '北京朝阳',
                sex:"0",
                dateValue:"2022-10-24",
                isNull: false,
                vVisible: true
            },{
                name: '李晓琪',
                city: '北京东城',
                sex:"1",
                dateValue:"2022-10-25",
                isNull: true,
                vVisible: true
            }, {
                name: '张小民',
                city: '北京西城',
                sex:"0",
                dateValue:"2022-10-26",
                isNull: true,
                vVisible: true
            }],
            sexes:[
              {
                text:'男',
                value:'0'
              },{
                text:'女',
                value:'1'
              }
            ],
        }
    },
    methods: {
        // 点击编辑按钮
        edit(row) {
            row.vVisible = !row.vVisible
            console.log(row)
        },
        // 点击删除按钮
        deleteit(row) {

        }
    }
  }
</script>
<style scoped>
.special{
  cursor: pointer;
}
.special .items:hover{
  color: #6fbaff;
}
</style>

参考网站：https://www.codenong.com/cs106360465/