VUE+Element UI实现简单的表格行内编辑效果的示例的代码

2019-11-19 12:36:20

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <!-- 引入样式 -->  <link 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><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>  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);      }    }  })</script> </html>

根据原理自定义效果