使用this.option.column[6].disabled = true/false界面没有跟着设置值产生对应的变化

Blade 未结 2 798
jionsvolk
jionsvolk 剑宗 2022-05-27 17:41

一、该问题的重现步骤是什么?

1. 使用avue的crud-form定义界面

2. 使用watch监听某一下拉列的值变化,如果选择否,使用this.option.column[6].disabled = true;让其他下拉列变为不可用,在选择是,使用this.option.column[6].disabled = false,让其他下拉恢复为可用



二、你期待的结果是什么?实际看到的又是什么?

期望使用this.option.column[6].disabled = true/false能够看到表单项变为不可用/可用,实际上没有看到变化

三、你正在使用的是什么产品,什么版本?在什么操作系统上?

产品:Bladex 企业版  2.6.0 ,avue版本2.8.2 ,Windows操作系统

四、请提供详细的错误堆栈信息,这很重要。


五、若有更多详细信息,请在下面提供。

代码:见附件

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               :row-style="rowStyle"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot-scope="scope" slot="expressionForm">
        <el-popover v-model="cronPopover" @show="showCron">
          <vueCron @change="changeCron" @close="cronPopover=false" ref="cron"></vueCron>
          <el-input slot="reference" v-model="form.expression" placeholder="请输入定时策略"></el-input>
        </el-popover>

      </template>


    </avue-crud>

    <el-dialog
      title="日志"
      append-to-body
      close-on-click-modal
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="50%">
      <collectlog :taskCode="taskCode"></collectlog>
    </el-dialog>
  </basic-container>
</template>



<script>
import vueCron from './collect_cron'
import collectlog from './collectlog'

import {
  getList,
  getDetail,
  add,
  update,
  remove,
  getDatasource,
  getJobGroups,
  startTask,
  stopTask,
  runTask,
  getUnUsedDatasourceList
} from "@/api/metadata/collecttask";
import {mapGetters} from "vuex";

export default {
  components: {vueCron, collectlog},
  created: function () {
    this.dictLoading();
  },
  data() {
    return {
      btnSaveDisabled: false,
      type: '',
      taskCode: null,
      dialogVisible: false,
      cronPopover: false,
      form: {"expression": ""},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false
      },
      selectionList: [],
      option: {
        align: 'center',
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        searchGutter: 10,
        searchLabelWidth: 100,
        border: true,
        index: true,
        viewBtn: true,
        dialogClickModal: false,
        labelWidth: 130,
        selection: false,
        saveBtn: false,
        updateBtn: false,
        cancelBtn: false,
        editTitle: '修改',
        editBtnText: '修改',
        column: [
          {
            label: "xxxx",
            prop: "name",
            maxlength: 50,
            rules: [{
              required: true,
              message: "xxx",
              trigger: "blur"
            }],
            search: true
          },
          {
            type: "select",
            label: "xxxxx",
            prop: "datasourceCode",
            viewDisplay: false,
            showColumn: false,
            filterable: true,
            dicData: [],
            rules: [{
              required: true,
              message: "xxxxx",
              trigger: "blur"
            }]
          },
          {
            type: "select",
            label: "xxxx",
            showColumn: false,
            prop: "jobGroupId",
            dicData: [],
            rules: [{
              required: true,
              message: "xxxxx",
              trigger: "blur"
            }]
          },
          {
            type: "select",
            label: "xxxx",
            prop: "datasourceName",
            editDisplay: false,
            addDisplay: false,
            viewDisplay: false,
            filterable: true,
            dicData: [],
            rules: [{
              required: true,
              message: "xxxx",
              trigger: "blur"
            }]
          },
          {
            type: "select",
            label: "xxx",
            prop: "coverStrategy",
            width: '85%',
            dicData: [
              {
                label: 'x',
                value: 0
              }, {
                label: 'xx',
                value: 1
              }, {
                label: 'xxx',
                value: 2
              }
            ],
            rules: [{
              required: true,
              message: "xxxxxx",
              trigger: "blur"
            }]
          },
          {
            type: "select",
            label: "xxxxxx",
            prop: "isFillIn",
            width: '95%',
            dicData: [
              {
                label: '否',
                value: 0
              }, {
                label: '是',
                value: 1
              }
            ],
            rules: [{
              required: true,
              message: "xxxxxx",
              trigger: "blur"
            }],
            search: true
          },
          {
            type: "select",
            label: "xxxxx",
            prop: "isDeploy",
            width: '95%',
            dicData: [
              {
                label: '否',
                value: 0
              }, {
                label: '是',
                value: 1
              }
            ],
            rules: [{
              required: true,
              message: "xxxxx",
              trigger: "blur"
            }],
            search: true
          },
          {
            type: "select",
            label: "xxxx",
            prop: "isAudit",
            width: '80%',
            dicData: [
              {
                label: '否',
                value: 0
              }, {
                label: '是',
                value: 1
              }
            ],
            rules: [{
              required: true,
              message: "xxxx",
              trigger: "blur"
            }],
            search: true
          }
        ]
      },
      data: []
    };
  },
  watch:{
    'form.isFillIn':{
      handler(val){
        debugger
        console.log(val);
        if(val === 0){
          this.option.column[6].disabled = true;
          this.option.column[7].disabled = true;
        }else if(val === 1){
          this.option.column[6].disabled = false;
          this.option.column[7].disabled = false;
          this.$refs.crud.doLayout();
        }
      }
    }
  }
};
</script>

2条回答
  • 2022-05-27 17:52

    推荐用如下新的api操作,并且如果要操作disabled的值,那需要给options内的column一个disabled的初始化值,否则无法生效。

    const column = this.findObject(this.regionOption.column, "xxx");
    column.disabled = true;


    1 讨论(1)
  • 请使用avue自带方法查找来动态更改属性,并且源码中有很多例子 

    const column = this.findObject(this.optionChild.column, "xxx");
    column.disabled = true


    0 讨论(1)
提交回复