原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示
!DOCTYPE html html head meta charset="UTF-8" !-- 引入样式 -- link rel="stylesheet" href="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" 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="vue/dist/vue.js" /script script src="element-ui/lib/index.js" /script script var app = new Vue({ el: '#app', data: { tableData: [{ date: '', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '', 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
根据原理自定义效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。