当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 174874提问 提问时间:2023-11-07 09:56:26阅读次数: 74

最佳答案 问答题库748位专家为你答疑解惑

情景是一个表格的每一行是动态新增的,每一行都有输入框,初始化表格页面的时候先加载一行的数据,输入框内有值了,第一行的表单是禁用的,以后再新增的行是空的行,就是输入框内没有值,是空的,<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>

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"Vue2项目引入element ui的表格第一行有输入框要禁用":http://eshow365.cn/6-34432-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!