Vue 的行内编辑

最新推荐文章于 2024-07-25 09:37:37 发布

爱打lan球的程序员

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量448

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44506660/article/details/129881480

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
   //这里的新增是指表table中新插入一行的数据
    <el-button type="primary" @click="add()">新增</el-button>
    <el-table :data="tableData" style="width: 100%" :key="mainTableKey">
        
      <el-table-column prop="name" label="姓名" min-width="120">
        <template slot-scope="scope">
            //如果isEdit标记位是true 则进行编辑，如果不是true则显示原来的值
          <el-input v-if="scope.row.isEdit" v-model="scope.row.name" placeholder="请输入内容"></el-input>
           //因为同列上的其他数据还是要展示原来数据的，这东西是控制一列的
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="province" label="省份" min-width="120">
        <template slot-scope="scope">
            //同理
          <el-input v-if="scope.row.isEdit" v-model="scope.row.province" placeholder="请输入内容"></el-input>
          <span v-else>{{scope.row.province}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="city" label="市区" min-width="120">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.city" placeholder="请输入内容"></el-input>
          <span v-else>{{scope.row.city}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" min-width="300">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.address" placeholder="请输入内容"></el-input>
          <span v-else>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="zip" label="邮编" min-width="120">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.zip" placeholder="请输入内容"></el-input>
          <span v-else>{{scope.row.zip}}</span>
        </template>
      </el-table-column>

//操作栏里面的操作
      <el-table-column fixed="right" label="操作" min-width="100">
        // 如果IsEdit标记位为true的话，即这个按钮不显示
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="!scope.row.isEdit" @click="edit(scope.row)">编辑</el-button>
        // 如果IsEdit标记位为false的话，即这个按钮不显示
          <el-button type="text" size="small" v-if="scope.row.isEdit" @click="save(scope.row)">保存</el-button>
          <el-button type="text" size="small" v-if="scope.row.isEdit" @click="cancel(scope.row, scope.$index)">取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        tableData: [],
        // table绑定key，更新key可以重新渲染table
        mainTableKey: 1
      },
      mounted() {
        //向后端发送请求，获取值的方法
      },
      methods: {
        // 新增
        add() {
          this.tableData.push({
            date: '',
            name: '',
            province: '',
            city: '',
            address: '',
            zip: '',
            isEdit: true,
            isAdd: true
          })
        },
        // 编辑
        edit(row) {
          // 备份原始数据
          row['oldRow'] = JSON.parse(JSON.stringify(row))
          row.isEdit = true
          this.mainTableKey = Math.random()
        },
        // 取消
        cancel(row, index) {
          // 如果是新增的数据
          if (row.isAdd) {
           //表格重新更新一行
            this.tableData.splice(index, 1)
          } else {
            // 不是新增的数据  还原数据
            for (const i in row.oldRow) {
              row[i] = row.oldRow[i]
            }
          }
             row.isEdit=false;
          this.mainTableKey = Math.random()
        },
        // 保存
        save (row) {
          if (row.isAdd) {
            console.log('新增')
          } else {
			console.log('编辑')
		  }
        }
      }
    })
  </script>
</body>

</html>