Vue3中根据select得选项值，改变当前元素同级下的子元素得disabled属性值

在 Vue 3 中，你通常不会直接通过类名（或任何其他 DOM 选择器）来获取 DOM 元素，因为 Vue 鼓励你使用数据驱动视图的方式来更新和操作元素。然而，如果你确实需要访问 DOM 元素（这通常是不推荐的，除非有特别的原因），你可以使用 Vue 3 的 ref 或者 refs（在模板中使用 ref 指令时，它们会在组件的 $refs 对象中作为响应式引用存在）。

但是，你不能直接使用类名来获取 ref。你需要显式地为每个你想要访问的 DOM 元素添加一个 ref。

由于没有引用jquery组件，不能使用class类名来查找改变元素得disabled属性，受用ref吧，有几个ref，就要先定义几个ref，对于动态生成得多个select来说，不合适，那咋么办呢

其实，在 Vue 中，当你需要根据一个 select 的值来改变同级 input 的 disabled 状态时，你可以使用 v-model 来双向绑定 select 的值，并使用计算属性或方法来根据这个值设置 input 的 disabled 状态。

因为 input 的 disabled 状态是响应式的 ，当select 值改变后，会自动相应到:disabled 中isDisabled方法中

如下：

<template>  
  <div v-for="(item, index) in items" :key="index">  
    <!-- 使用 v-model 绑定 select 的值 -->  
    <select v-model="item.selectedValue" @change="onChange(index)">  
      <option value="option1">选项1</option>  
      <option value="option2">选项2</option>  
      <!-- 其他选项... -->  
    </select>  
  
    <!-- 根据 select 的值设置 input 的 disabled 状态 -->  
    <input :disabled="isDisabled(item.selectedValue)" type="text" placeholder="输入内容">  
  
    <!-- 其他内容... -->  
  </div>  
  
  <!-- 添加按钮 -->  
  <button @click="addItem">添加</button>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      items: [  
        { selectedValue: 'option1' }, // 初始项  
        // 其他初始项...  
      ],  
    };  
  },  
  methods: {  
    addItem() {  
      // 添加一个新的项，初始值为 'option1'  
      this.items.push({ selectedValue: 'option1' });  
    },  
    onChange(index) {  
      // 当 select 的值改变时，这个方法会被调用  
      // 但通常这里不需要做什么，因为 input 的 disabled 状态是响应式的  
    },  
    isDisabled(value) {  
      // 根据 select 的值来决定 input 是否应该被禁用  
      // 例如，当 value 为 'option2' 时禁用 input  
      return value === 'option2';  
    },  
  },  
};  
</script>

实际开发中的例子：

<el-form-item label="产品规格" prop="specs">
            <el-table :data="specificeData" style="width: 100%" :disabled="disabled1">
              <el-table-column label="序号" prop="index" width="60" />
              <el-table-column label="规格型号" prop="title">
                <template #default="scope">
                  <el-input v-model="scope.row.title"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="计量单位" prop="unit">
                <template #default="scope">
                  <el-input v-model="scope.row.unit"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="价格方式" prop="pricingMethod">
                <template #default="scope">
                  <el-select v-model="scope.row.pricingMethod" @change="changePriceMethod(`disabledPrice-${scope.row.index}`)" >
                    <el-option label="统一价" value="统一价" />
                    <el-option label="价格面议" value="价格面议" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="单价" prop="price">
                <template #default="scope">
                  <div>
                    <!-- <el-input style="width: 80%" v-model="scope.row.price" :class="[`disabledPrice-${scope.row.index}`]" ></el-input> -->
                    <el-input style="width: 80%" v-model="scope.row.price" :disabled="isDisabled(scope.row.pricingMethod)" ></el-input>
                    <span style="margin-left: 5px; font-size: 12px">元</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template #default="scope">
                  <el-text class="mx-1" type="danger" @click="deleteSpecifice(scope.row)" style="cursor: pointer"
                    v-if="specificeData.length > 1" :disabled="disabled1">删除</el-text>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" @click="addSpecifice" style="margin-top: 10px">添加规格</el-button>
          </el-form-item>

js

function changePriceMethod(e,className){
  // if(e==="价格面议"){
  //   //disabledPrice.value=true;
  //   $("."+className+"").prop("disabled",true);
  // }else{
  //   //disabledPrice.value=false;
  //   $("."+className+"").prop("disabled",false);
  // }
}

function isDisabled(e){
  console.log("e-123",e);
  if(e==="价格面议"){
    //disabledPrice.value=true;
    return true;
  }else{
    //disabledPrice.value=false;
   return false;
  }
}