使用ref动态绑定标签,并且为标签修改样式。

html部分

            <el-form-item>
              <img src="@/assets/duty/line.png" style="width: 4px;height: 15px;vertical-align: middle;margin-top: -9px;margin-right: 5px;"><label class="el-form-item__label">上级检查、重要通知情况:</label>
               <div style="border: 1px solid rgb(220, 223, 230); width: 95%;min-height: 33px; line-height:1.5;padding:15px;">
                <span v-for='item in importInfo' :key='item.id' style="background-color:pink;border-radius:5px;">
                  <input v-show="item.inputShow" :id="item.id" v-model="item.nextdayInfo" v-focus @blur.prevent="changeCount(item)" @change="handlerChange" type="text" style='width:calc(100% - 80px);border:none;background:rgba(0,0,0,0);outline:none'>
                  <span :ref="item.id" v-show="!item.inputShow">{{item.departName}}{{item.nextdayInfo}}
                    <slot>
                      <span @click.stop="edit(item)" class="el-icon-edit-outline"></span>
                      <span @click.stop="refresh(item)" class="el-icon-refresh-right"></span>
                      <span @click.stop="remove()" class="el-icon-close"></span>
                    </slot>
                  </span>
                  <br />
                </span>
              </div>
            </el-form-item>

js部分

      refresh(item){
        console.log(item)
        getAction('地址',{参数名:参数}).then((res)=>{
          if(res.success) {
            console.log(res.result);
            let arr3;
            arr3 = res.result
            for(var index in arr3){
              if(arr3[index].id == item.id) {
               item.nextdayInfo = arr3[index].content
               let st = item.id
               this.$refs[st][0].style.backgroundColor = "pink"
              }
            }
          }else{
             this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            });           
          }
        })
        console.log("重新调数据");
      },

你可能感兴趣的:(前端开发)