[JavaScript知识库] vue+element实现表格的可编辑点击那个格修改那个

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue+element实现表格的可编辑点击那个格修改那个 -> 正文阅读

[JavaScript知识库]vue+element实现表格的可编辑点击那个格修改那个

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .cell span{
      display: block;
      width: 100%;
      height: 100%;
      background-color: chartreuse;
    }
  </style>
</head>

<body>
  <div id="app">
    --------------------- 第一列的数据----------------------
    <el-table :data="tabledatas" border>
      <el-table-column label="tab1">
        <template slot-scope="scope">
                  ------- 编辑框--------
          <el-input placeholder="请输入内容"
                    v-show="scope.row.show1"
                    v-model="scope.row.tab1"
                    @keyup.enter.native="handlechangeapp(scope.row,'show1')"
                    @blur="handlechangeapp(scope.row,'show1')">

          </el-input>
                    ------- 数据展示--------
          <span v-show="!scope.row.show1"
                @click="handlechange(scope.row,'show1')">
            {{scope.row.tab1}}
          </span>
        </template>
      </el-table-column>
     ----------------------- 第二列的数据----------------------
      <el-table-column label="tab2">
        <template slot-scope="scope">
                      ------- 编辑框--------
          <el-input placeholder="请输入内容"
                    v-show="scope.row.show2"
                    v-model="scope.row.tab2"
                    @keyup.enter.native="handlechangeapp(scope.row,'show2')"
                    @blur="handlechangeapp(scope.row,'show2')">

          </el-input>
                      ------- 数据展示--------
          <span v-show="!scope.row.show2"
                @click="handlechange(scope.row,'show2')">
            {{scope.row.tab2}}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        tabledatas: [
          { tab1: '111', tab2: '2222', show1: false,show2: false },
          { tab1: 'aaa', tab2: 'bbb', show1: false,show2: false },
        ],
      }
    },
    methods: {
      handlechange(row,show){
        row[show]=true
      },
      handlechangeapp(row,show){
        row[show]=false
      }
    }
  })
</script>

</html>