vue+elementui实现可编辑表格，数值限制最大最小值

关键思想：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加上，就是通过它来控制编辑与非编辑切换

第一次发博客，格式不熟悉，见谅！