一、该问题的重现步骤是什么?
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>
扫一扫访问 Blade技术社区 移动端