已解决
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%的人还看了
相似问题
- Element UI 禁用数字输入框组件添加鼠标滚动事件
- 关于react输入框回显问题
- Vue2项目引入element ui的表格第一行有输入框要禁用
- layui form 中input输入框长度的统一设置
- 微信小程序获取剪切板的内容到输入框中
- vue element 移动端 点击输入框软键盘弹出,页面布局更改,关闭键盘后,布局没回弹
- h5页面input输入框手机键盘没有“搜索”按钮;隐藏自带的清除、搜索图标;点搜索后键盘无法自动收回。
- input 调起键盘 ,键盘距离输入框底部太近
- element-ui input 输入框赋值后,无法再输入的问题解决
- tinymce输入框怎么限制只输入空格或者回车时不能提交
猜你感兴趣
版权申明
本文"Vue2项目引入element ui的表格第一行有输入框要禁用":http://eshow365.cn/6-34432-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!