
Avue动态显隐列
实现的效果:根据select选择框 选择不同的选项,展示不同的列,隐藏不需要的列。option: {height:'auto',calcHeight: 30,tip: false,searchShow: true,searchMenuSpan: 6,border: true,index: true,viewBtn: true
·
实现的效果:根据select选择框 选择不同的选项,展示不同的列,隐藏不需要的列。
代码:
option: {
height:'auto',
calcHeight: 30,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: true,
selection: true,
dialogClickModal: false,
labelWidth:120,
delBtn: false,
column: [
{
label: "单位名称",
prop: "breedPlaceName"
}
],
group:[
{
label: "展区",
prop: 'jbxx2',
icon: 'el-icon-edit-outline',
column: [
{
label: "壕沟",
prop: "isTrench",
type: "switch",
align: "center",
span: 24,
width: 80,
dicData: [
{
label: "不使用",
value: 1
},
{
label: "使用",
value: 0
}
],
value: 0
},
{
label: "壕沟深度(m)",
prop: "trenchDepth",
display: true, //是否展示,这个属性必填 没初始化不能动态显隐
hide: true,
rules: [{
required: true,
message: "请输入壕沟深度",
trigger: "blur"
},
{pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
message: '请输入大于0的数字,保留小数后两位', trigger: 'blur'}
]
},
{
label: "壕沟宽度(m)",
prop: "trenchWidth",
display: true,
hide: true,
rules: [{
required: true,
message: "请输入壕沟宽度",
trigger: "blur"
},
{pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
message: '请输入大于0的数字,保留小数后两位', trigger: 'blur'}
]
},
]
根据select选择的值,控制列的显隐
使用监听,控制上面的option字段的显隐
watch: {
'form.isTrench':{//获取form中select选择的值
handler(val) {
var trenchType = this.findObject(this.option.group, 'trenchType') //根据字段名获取到这一列
var trenchDepth = this.findObject(this.option.group, 'trenchDepth')
var trenchWidth = this.findObject(this.option.group, 'trenchWidth')
var waterDepth = this.findObject(this.option.group, 'waterDepth')
//0展示1不展示
if(val == 0){
trenchType.display = true//根据select选择的值控制对应列的显隐
trenchDepth.display = true
trenchWidth.display = false
waterDepth.display = false
}else if (val == 1){
trenchType.display = false
trenchDepth.display = false
trenchWidth.display = true
waterDepth.display = true
}
}
},
}
监听多个值变化
先用computed定义一个tagDataLengthAndEditSymbol对象,然后再去watch 监听该对象。
data() {
2 return {
3 tagList: [],
4 editSymbol: ''
5 }
6 },
7 computed: {
8 tagDataLengthAndEditSymbol(){
let tagDataLength = this.tagList.length
let editSymbol = this.editSymbol
return {
tagDataLength,
editSymbol
}
}
15 },
16 watch: {
17 tagDataLengthAndEditSymbol(val){
18 console.log(val)
19 }
20 }
打印结果
就可以根据监听到的值处理业务了
如果对您有帮助,帮忙点赞关注哦,谢谢!
更多推荐
所有评论(0)