vue 添加显示,编辑隐藏 form表单中的一列
v-show:true为显示,false为隐藏v-show=“this.data.isShow” 该值:this.data.isShow 在下面配置为true(默认).<Form ref="dataFrom" :model="dataFrom" :label-width="70" :rules="dataFromValidate"><FormItem label="op" pro
·
java面试题网站:www.javaoffers.com
v-show: true为显示,false为隐藏
v-show=“this.data.isShow” 该值:this.data.isShow 在下面配置为true(默认).
<Form ref="dataFrom" :model="dataFrom" :label-width="70" :rules="dataFromValidate">
<FormItem label="op" prop="opOpValue">
<Input v-model="dataFrom.opOpValue" autocomplete="off"/>
</FormItem>
<FormItem label="opc" prop="opcOpcValue">
<Input v-model="dataFrom.opcOpcValue" autocomplete="off"/>
</FormItem>
<FormItem label="permanentKeyValue" prop="pkPermanentKeyValue">
<Input v-model="dataFrom.pkPermanentKeyValue" autocomplete="off"/>
</FormItem>
<FormItem label="sequenceNumber" prop="sequenceNumber">
<Input v-model="dataFrom.sequenceNumber" autocomplete="off"/>
</FormItem>
<FormItem label="ueId/supi/Suci" prop="supi" v-show="this.data.isShow">
<Input v-model="dataFrom.supi" autocomplete="off"/>
</FormItem>
<FormItem label="MSISDN/手机号" prop="phoneNumber">
<Input v-model="dataFrom.phoneNumber" autocomplete="off"/>
</FormItem>
</Form>
配置isShow的默认值
export default {
name: 'classify',
data: function () {
return {
//配置:isShow
data:{
isShow: true, // 默认显示
},
columns: [
{
type: "selection",
width: 60,
align: "center",
fixed: "left"
},
{
type: "index",
width: 60,
align: "center",
fixed: "left"
},
{
title: "op",
key: "opOpValue",
minWidth: 60,
sortable: true,
fixed: "left"
},
{
title: "opc",
key: "opcOpcValue",
minWidth: 145,
sortable: true,
fixed: "left"
},
{
title: "permanentKeyValue",
key: "pkPermanentKeyValue",
minWidth: 145,
sortable: true,
fixed: "left"
},
{
title: "sequenceNumber",
key: "sequenceNumber",
sortable: true,
sortType: "desc",
width: 150
},
{
title: "supi",
key: "supi",
sortable: true,
sortType: "desc",
width: 150
},
{
title: "手机号",
key: "phoneNumber",
sortable: true,
sortType: "desc",
width: 150
},
{
title: "操作",
key: "action",
width: 200,
align: "center",
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.edit(params.row);
}
}
},
"编辑"
),
h(
"Button",
{
props: {
type: "error",
size: "small"
},
on: {
click: () => {
this.remove(params.row);
}
}
},
"删除"
)
]);
}
}
],
};
},
methods:{
add() {
this.modalType = 0;
this.modalTitle = "新增用户";
this.$refs.dataFrom.resetFields();
this.data.isShow = true;
this.dataModalVisible = true; //添加显示
},
edit(v) {
this.modalType = 1;
this.modalTitle = "编辑类别";
this.$refs.dataFrom.resetFields();
// 转换null为""
for (let attr in v) {
if (v[attr] === null) {
v[attr] = "";
}
}
let str = JSON.stringify(v);
let data = JSON.parse(str);
this.dataFrom = data;
this.dataModalVisible = true;
this.data.isShow=false //编辑隐藏
},
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)