vue.js 一个数据属性改变不能影响按钮在elementui中被禁用

情况是这样的：有多个人参与这个功能，这个页面需要根据他们的帖子显示正确的动作
下面是代码：

<el-table :data="form.stage1_xmglXmRgcbmxList" border max-height="250" style="width: 100%">
              <el-table-column align="center" label="序号" type="index" width="50"/>
              <el-table-column align="center" label="一级部门">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.deptId1" placeholder="请选择" size="mini" @change="handleDept1Changed(scope.row)"
                             :disabled="!scope.row.hasAuth">
                    <el-option v-for="item in rgcbflmxOptions" :key="item.DEPT_ID" :label="item.DEPT_NAME" :value="item.DEPT_ID"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="二级部门">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.deptId2" placeholder="请选择" size="mini" @change="handleDept2Changed(scope.row)"
                             :disabled="!scope.row.hasAuth">
                    <el-option v-for="item in getDictChildren(rgcbflmxOptions, scope.row.deptId1)" :key="item.DEPT_ID"
                               :label="item.DEPT_NAME" :value="item.DEPT_ID"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="工作量(人/天)" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.gzNum" :disabled="!scope.row.hasAuth" size="mini" type="text" @input="handleCalcCostOfRow(scope.row)" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="100">
                <template slot="header">
                  <el-button @click="handleAdd('stage1', 'labor')" size="mini" type="success" :disabled="!sqXmfyEditable">添加</el-button>
                </template>
                <template slot-scope="scope">
                  <el-button :disabled="!scope.row.hasAuth" size="mini" type="danger" @click="handleDelete(scope.row, scope.$index, 'labor')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

data() {
    return {
        sqRgcbEditable: false,
      sqXmfyEditable: false,
      otdRgcbEditable: false,
      otdXmfyEditable: false,
      onenRgcbEditable: false,
      onenXmfyEditable: false,
      csRgcbEditable: false,
      csXmfyEditable: false,
    }
}

methods:{
    analysisAuth(row){
      if(row.stage=='stage1' && this.user.posts.some(item=>item.postCode=='GSPGSQ(530)')){
        row.hasAuth=true
        this.sqRgcbEditable=true
        this.sqXmfyEditable=true
      }else if(row.stage=='stage2' && this.user.posts.some(item=>item.postCode=='GSPGOTD(530)')){
        row.hasAuth=true
        this.otdRgcbEditable=true
        this.otdXmfyEditable=true
      }else if(row.stage=='stage3' && this.user.posts.some(item=>item.postCode=='GSPG1-N(530)')){
        row.hasAuth=true
        this.onenRgcbEditable=true
        this.onenXmfyEditable=true
      }else if(this.user.posts.some(item=>item.postCode=='GSPGDSF(530)')){
        row.hasAuth=true
        this.sqXmfyEditable=true
        this.otdXmfyEditable=true
        this.onenXmfyEditable=true
        this.csXmfyEditable=true
      }else if(this.user.posts.some(item=>item.postCode=='GSPGDL(530)')){
        row.hasAuth=true
        this.sqXmfyEditable=true
        this.otdXmfyEditable=true
        this.onenXmfyEditable=true
        this.csXmfyEditable=true
      }
    }
}

字符串
方法analysisAuth（row）将数据属性sqXmfyEditable更改为true，然后添加按钮将是可编辑的。但按钮已禁用。
我搜索了一下，问了我们的前端工程师，他告诉我他没有发现错误。有人知道为什么吗？

从您提供的代码片段来看，似乎您正在尝试根据用户的帖子利用Vue.js应用程序中的Element UI库有条件地启用/禁用表单控件。
The disabled attribute for the "添加" (Add) button is bound to !sqXmfyEditable .当sqXmfyEditable为false时，该按钮将被禁用。但是，当您在analysisAuth方法中将sqXmfyEditable更新为true时，它不会直接影响按钮的状态。
以下是可能导致问题的原因：
1.React范围：确保analysisAuth方法在组件生命周期内的拟合点被调用，以便计算出的状态反映在按钮上。如果analysisAuth没有被调用或者没有在正确的时刻被调用，那么状态改变可能不会传播。
1.父子组件传播：如果这些数据片段在父子组件之间共享，请确保属性在组件之间正确传递。
1.手动更新DOM：您可能需要处理一些手动DOM更新或直接操作，这与Vue的React性系统相冲突。
以下是一些您可以尝试调试并可能修复问题的步骤：

*控制台日志记录：在analysisAuth方法中添加控制台日志语句，以确保调用该方法并设置预期值。例如：

console.log('sqXmfyEditable before:', this.sqXmfyEditable);
// ... your logic ...
console.log('sqXmfyEditable after:', this.sqXmfyEditable);

字符串

*使用计算属性：如果存在确定何时应启用/禁用按钮的逻辑，请考虑将此逻辑封装在计算属性中。这可以有助于维持React性。
*确保函数调用正确：确保在正确的时间调用analysisAuth方法，例如在生命周期钩子中或响应事件时。
*检查外部因素：确保没有外部因素（如CSS）可能使按钮显示为禁用，即使它不是。

vue.js 一个数据属性改变不能影响按钮在elementui中被禁用

1条答案

相关问题

热门标签

最新问答