scope.$index, scope.row
时间: 2023-04-22 16:04:14 浏览: 450
scope.$index是AngularJS中ng-repeat指令中的一个内置变量,表示当前循环的索引值。
scope.row是一个自定义变量,通常用于存储ng-repeat中循环的每一项数据。它可以在ng-repeat指令中通过ng-init指令或者在控制器中定义。
相关问题
<template slot-scope="scope"> <el-form-item :prop="'list.' + scope.$index + '.controlok'" :rules="fromDataRules.controlok" > <el-input v-if="scope.row.controluse === 'S2F21'" :disabled=" scope.row.iscontrol === false || scope.row.iscontrol == null || scope.row.iscontrol == '' " v-model="scope.row.controlok" filterable clearable /> <el-select v-else v-model="scope.row.controlok" :disabled=" scope.row.iscontrol === false || scope.row.iscontrol == null || scope.row.iscontrol == '' " :placeholder="t('web_ems_tip_pleaseInput')" filterable clearable > <el-option v-for="item in identifyingList" :key="item.id" :label="item" :value="item" /> </el-select> </el-form-item> </template>中表单验证controlok: [{ validator: checkPass, trigger: "blur" }],checkPass方法中怎么获取到该行数
可以通过传入参数的方式获取到该行数。在定义checkPass方法时,可以在参数中传入当前表单项的值和当前表单项的索引。例如:
```
checkPass(rule, value, callback, index) {
// index即为当前表单项的索引
// 可以根据索引来获取到该行数
const row = this.list[index];
// ...
}
```
在模板中调用该方法时,需要将当前表单项的索引作为参数传入:
```
<el-form-item
:prop="'list.' + scope.$index + '.controlok'"
:rules="fromDataRules.controlok"
>
<el-input
v-if="scope.row.controluse === 'S2F21'"
:disabled="
scope.row.iscontrol === false ||
scope.row.iscontrol == null ||
scope.row.iscontrol == ''
"
v-model="scope.row.controlok"
filterable
clearable
:class="{ 'is-invalid': errors['list.' + scope.$index + '.controlok'] }"
/>
<el-select
v-else
v-model="scope.row.controlok"
:disabled="
scope.row.iscontrol === false ||
scope.row.iscontrol == null ||
scope.row.iscontrol == ''
"
:placeholder="t('web_ems_tip_pleaseInput')"
filterable
clearable
:class="{ 'is-invalid': errors['list.' + scope.$index + '.controlok'] }"
>
<el-option
v-for="item in identifyingList"
:key="item.id"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
```
可以看到,在el-input和el-select中都有一个:class绑定,用来判断当前表单项是否验证通过,如果不通过,则添加一个is-invalid类名,可以在样式中对该类名进行样式设置。同时,在prop中也需要将当前表单项的索引作为属性名的一部分。这样,在定义checkPass方法时,就可以通过该属性名来获取到该行数的值。
<el-table-column min-width="30px" prop="setValue" label="参数值" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-input v-if="isEdit == scope.$index" v-model="scope.row.value" placeholder="请输入内容" style="text-align: center;" class="edit-input" size="small"></el-input> <el-button v-if="isEdit == scope.$index" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="handleDelete(scope.$index, scope.row)">确定</el-button> <span v-if="isEdit != scope.$index">{{ scope.row.value }}</span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> </template> </el-table-column>这段代码中如何实现判断输入框内容为空时,提示不能为空且不退出编辑文本,输入参数值大于1小于0提示输入错误
可以在确认按钮的点击事件中添加判断,判断输入框的内容是否为空或者是否符合规定范围,如果不符合则提示相应的错误信息,并且不退出编辑状态。代码示例如下:
```
<el-button v-if="isEdit == scope.$index" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
...
methods: {
handleConfirm(index, row) {
if (!row.value) {
this.$message({
message: '参数值不能为空',
type: 'warning'
})
return
}
if (row.value < 0 || row.value > 1) {
this.$message({
message: '请输入0~1之间的数字',
type: 'warning'
})
return
}
// 其他操作
}
}
```
其中 `this.$message` 是 ElementUI 中的弹窗提示组件,可以根据需要自行修改。