vue+elementui实现可编辑表格,数值限制最大最小值
关键思想:1.template中加scope=”scope“属性,用来获取当前行中对应的列的值;2.通过<el-input-number>与<sapn>的显示隐藏切换来实现编辑/不编辑状态3.部分单元格不可编辑,利用后台传回的数据,加一个字段v-if=’该字段‘,则当前单元格可编辑
·
关键思想:1.template中加scope=”scope“属性,用来获取当前行中对应的列的值;
2.通过<el-input-number>与<sapn>的显示隐藏切换来实现编辑/不编辑状态
3.部分单元格不可编辑,利用后台传回的数据,加一个字段v-if=’该字段‘,则当前单元格可编辑
vue 页面:
<template>
<div id="container">
<p>{{institutation}}</p>
<div >
<el-table :data="tableData" border class="tb-edit" height="450" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
<el-table-column label="城区管委会" width="260">
<template scope="scope">
<span>{{scope.row.areaName}}</span>
</template>
</el-table-column>
<el-table-column label="市政设施" width="260">
<template scope="scope">
<el-input-number size="small" controls-position="right" :min="0" :max="100" :step="0.01" v-if="scope.row.markCode=='2'&&allCode=='1'" v-model="scope.row.szss" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input-number>
<span>{{scope.row.szss}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default{
props:['tableData','allCode','institutation'],
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>
<style scoped>
.tb-edit .el-input-number {
display: none
}
.tb-edit .current-row .el-input-number {
display: block
}
.tb-edit .current-row .el-input-number+span {
display: none
}
</style>
tableData是要从被引入的页面获取的数据;
highlight-current-row是表格属性,点击单行时当前行会有.current-row加上,就是通过它来控制编辑与非编辑切换
第一次发博客,格式不熟悉,见谅!
更多推荐
已为社区贡献2条内容
所有评论(0)