Errors compiling template: icon="el-icon-star-{{ problem_id_favorite.includes(scope.row.problem_id)?'on':'off' }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">. 101| <el-button 102| size="medium" 103| type="text" | 104| icon="el-icon-star-{{ problem_id_favorite.includes(scope.row.problem_id)?'on':'off' }}" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 105| @click="delTable(scope.row)"

这个错误是因为在模板中使用了插值表达式 {{ }} 来动态绑定 icon 属性值，但在 Vue.js 2.x 中，插值表达式不能在属性中使用。可以使用 v-bind 或简写的 : 来实现动态绑定属性，例如：

<el-button
  size="medium"
  type="text"
  :icon="'el-icon-star-' + (problem_id_favorite.includes(scope.row.problem_id) ? 'on' : 'off')"
  @click="delTable(scope.row)"
>

在这个例子中，我们使用了 :icon 来绑定 icon 属性，然后使用字符串拼接和三元表达式来实现动态绑定。

相关问题

<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-form-item prop="problem_detail.project_phase" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' } ]" style="margin-left: 8px"> 将校验信息显示在输入框内

你可以在 `el-input` 组件中使用 `slot` 来自定义校验信息的显示位置，例如：

<el-form-item
  prop="problem_detail.project_phase"
  :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' }] "
  style="margin-left: 8px"
>
  <el-input v-model="formData.problem_detail.project_phase" placeholder="请输入项目阶段">
    <template #prepend>
      <span>项目阶段</span>
    </template>
    <template #append>
      <el-tooltip :content="errors[0]" placement="top" :disabled="!errors[0]">
        <i :class="['el-icon-warning', errors[0] ? 'is-error' : '']"></i>
      </el-tooltip>
    </template>
  </el-input>
</el-form-item>

这里我们通过 `slot` 的方式，在 `el-input` 组件中添加了 `prepend` 和 `append` 插槽，将项目阶段的标题和校验信息分别显示在输入框前面和后面。同时，我们还使用了 `errors` 数组来获取表单项的错误信息，如果有错误信息，则会将错误信息显示在输入框后面的提示框中。