vue 添加显示,编辑隐藏 form表单中的一列

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  //编辑隐藏
            },        
        }
      
}