Vue2项目引入element ui的表格第一行有输入框要禁用

输入框要禁用"/>

Vue2项目引入element ui的表格第一行有输入框要禁用

情景是一个表格的每一行是动态新增的，每一行都有输入框，初始化表格页面的时候先加载一行的数据，输入框内有值了，第一行的表单是禁用的，以后再新增的行是空的行，就是输入框内没有值，是空的，<el-table>的每一行是用data属性直接给数据源渲染出来的，都是批量的操作，没法单独拎出来一行做操作，思路是第一行在数组的下标值是0，判断下标值为0就禁用这个输入框，:disabled="scope.$index==0?true:false"     代码示例如下：

<template><div id="app"><!-- 测试区域！！！！！！！！！！！！！！！！！需求是第一行的表单输入框等要禁用 --><el-table :data="tableData" style="width: 50%"><el-table-column prop="name" label="物品" width="180" /><el-table-column prop="danjia" label="单价" width="100" /><el-table-column label="数量" align="center" prop="num"><template v-slot="scope"><el-input :disabled="scope.$index==0?true:false"placeholder="数量"v-model="scope.row.num" @change="changenum(tableData,scope.$index,scope.row)"/></template></el-table-column><el-table-column label="总价" align="center" prop="zongjia"><template v-slot="scope"><el-input :disabled="scope.$index==0?true:false"placeholder="总价"v-model="scope.row.zongjia"/></template></el-table-column></el-table> <!-- 测试区域结束！！！！！！！！！！！！！！！ --></div>
</template>
<script>export default {name: '',data(){return{tableData:[{id:1,name:"物品1",danjia: 10,num: 1,zongjia:10},{id:2,name:"物品2",danjia: 5,num: 1,zongjia:5},]}},methods:{//数量改变时总价随之改变changenum(data, index, row){if(row.num==""||row.num==null){alert("数量不能为空")}else{data[index].zongjia=row.danjia*row.num}console.log("11-1---tableData,",data)}},mounted(){}
}
</script><style></style>