vue点击选择实现对应顺序的元素的样式操作

    <el-table-column prop="node_id" label="输出节点">

                                    <template slot-scope="scope">

                                      <el-select

                                        v-model="scope.row.node_id"

                                        output-node

                                        @focus="clickHighlight(scope.$index)"

                                        @change="handleScreenBind(scope.$index)"

                                        @blur="removeHighlight(scope.$index)"

                                      >

                                        <el-option

                                          v-for="item in groupNodeOptions"

                                          :key="item.id"

                                          :label="item.name"

                                          :value="item.node_id"

                                        />

                                      </el-select>

                                    </template>

                                  </el-table-column>

@focus 选中传参为index

  <div class="group-content-right-info-row">

                          <cut-div

                            ref="cut-div"

                            :row="singleGroupList.col"

                            :col="singleGroupList.row"

                            :width="700"

                            :height="400"

                          />

                        </div>

对cut-div绑定ref 这里名为cut-div

// 选中高亮

    clickHighlight(index) {

      this.$refs['cut-div'].$el.childNodes[index].style.border = '5px solid #56a8fb'

      this.$refs['cut-div-thumbnail'].$el.childNodes[index].style.border = '5px solid #56a8fb'

    },

    // 失去光标高亮

    removeHighlight(index) {

      this.$refs['cut-div'].$el.childNodes[index].style.border = 'none'

      this.$refs['cut-div-thumbnail'].$el.childNodes[index].style.border = ' none'

    },

光标移入的时候 通过$ref操作$el的子节点的style设置 这里使用修改了border