VUE+Element UI实现简单的表格行内编辑效果的示例的代码
程序员文章站
2023-11-28 08:54:16
原理是通过css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示
...
原理是通过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>
根据原理自定义效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 微信小程序实现单选功能