原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

效果示例地址

<!DOCTYPE html>
<html>

<head>
  <  charset=\"UTF-8\">
  <!-- 引入样式 -->
  <  rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-default/index.css\" rel=\"external nofollow\" >
  <style>
    * {
  margin: 0;
  padding: 0
}
body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  overflow: auto;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
  display: none
}
.tb-edit .current-row .el-input {
  display: block
}
.tb-edit .current-row .el-input+span {
  display: none
}
  </style>
</head>

<body>
  <div id=\"app\">
    <el-table :data=\"tableData\" class=\"tb-edit\" style=\"width: 100%\" highlight-current-row @row-click=\"handleCurrentChange\">
      <el-table-column label=\"日期\" width=\"180\">
        <template scope=\"scope\">
          <el-input size=\"small\" v-model=\"scope.row.date\" placeholder=\"请输入内容\" @change=\"handleEdit(scope.$index, scope.row)\"></el-input> <span>{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label=\"姓名\" width=\"180\">
        <template scope=\"scope\">
          <el-input size=\"small\" v-model=\"scope.row.name\" placeholder=\"请输入内容\" @change=\"handleEdit(scope.$index, scope.row)\"></el-input> <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop=\"address\" label=\"地址\">
        <template scope=\"scope\">
          <el-input size=\"small\" v-model=\"scope.row.address\" placeholder=\"请输入内容\" @change=\"handleEdit(scope.$index, scope.row)\"></el-input> <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column label=\"操作\">
        <template scope=\"scope\">
          <!--<el-button size=\"small\" @click=\"handleEdit(scope.$index, scope.row)\">编辑</el-button>-->
          <el-button size=\"small\" type=\"danger\" @click=\"handleDelete(scope.$index, scope.row)\">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>数据:{{tableData}}</div>
</body>
<  src=\"https://unpkg.com/vue/dist/vue.js\"></ >
<  src=\"https://unpkg.com/element-ui/lib/index.js\"></ >
< >
  var app = new Vue({
    el: \'#app\',
    data: {
      tableData: [{
        date: \'2016-05-02\',
        name: \'王小虎\',
        address: \'上海市普陀区金沙江路 1518 弄\'
      }, {
        date: \'2016-05-04\',
        name: \'王小虎\',
        address: \'上海市普陀区金沙江路 1517 弄\'
      }, {
        date: \'2016-05-01\',
        name: \'王小虎\',
        address: \'上海市普陀区金沙江路 1519 弄\'
      }, {
        date: \'2016-05-03\',
        name: \'王小虎\',
        address: \'上海市普陀区金沙江路 1516 弄\'
      }]
    },
    methods: {
      handleCurrentChange(row, event, column) {
        console.log(row, event, column, event.currentTarget)
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  })
</ > 
</html>

根据原理自定义效果

\"\"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章