vue element ui 怎么点击按钮隐藏让另外一个按钮显示

1、新建一个html页面，然后在这个代码页面上创建一个div标签id为app，然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签，然后创建vue的挂载点。

4、使用data创建show属性，默认值为true；使用metheds创建一个点击事件（showCont），该事件处理当show值为true就修改给false，当show为false就修改为true。

5、添加显示隐藏功能。在按钮标签上添加点击事件showCont，在按钮标签后的div标签上使用v-if添加show属性。

6、保存html代码，然后使用浏览器打开，点击按钮会发现按钮后面的文字隐藏了，再次点击按钮隐藏的内容又显示出来。

效果如图：

表头标题是重复的、为了能看到滚动效果

v-if="lists[0].ispass" 来判断表格列的状态每一列是否显示或隐藏 勾选则展示、取消勾选隐藏、默认勾选

<el-dropdown :hide-on-click="false">

            <i class="iconfont icon-shaixuan" ></i>

            <el-dropdown-menu slot="dropdown" >

              <el-scrollbar style="height: 60vh">//作用是数据过多把表单数据的整体高度固定、多出的区域可以下拉展示

                <el-checkbox-group v-model="check">

                  <el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :label="item" :key="item"></el-checkbox>

                  </el-dropdown-item>

                </el-checkbox-group>

              </el-scrollbar>

            </el-dropdown-menu>

</el-dropdown>

<el-table :data="institutionalTypeList" border align="center" v-loading="listLoading" style="width: 100%" :header-cell-style="tableBg">

        <af-table-column type="index" :index="indexMethod" label="序号" width="90">

        </af-table-column>

        <af-table-column v-if="lists[0].ispass" prop="id" label="编码" >

        </af-table-column>

        <af-table-column v-if="lists[1].ispass" prop="name" label="名称" >

        </af-table-column>

        <af-table-column v-if="lists[2].ispass" prop="updatetime" label="更新时间" >

        </af-table-column>

</el-table>

lists是所有表头标题，check是多选框默认全选，checkList也是所有表头标题、跟多选框绑定的

data() {

      return {

        check:['编码','名称','更新时间'],

        checkList:['编码','名称','更新时间'],

        lists:[

          {label:'编码',ispass:true},

          {label:'名称',ispass:true},

          {label:'更新时间',ispass:true},

        ],

      }

    },

动态监听值选中的选项

watch:{

      check(newVal){

            if (newVal) {

              var arr = this.checkList.filter(i =>newVal.indexOf(i) <0) //未选中

              this.lists.map(i =>{

                if (arr.indexOf(i.label) !== -1) {

                  i.ispass = false

                } else {

                  i.ispass = true

                }

              })

            }

      }

    },

1、拖拽表单新增绑定数据表、绑定数据字段（原来是自动创建数据表和数据字段），新增后可以关联之前的数据表进行 *** 作。

2、流程bpmnjs新增审批节点控制表单的属性，比如审批节点A可以编辑标题项、隐藏内容项，实现了对流程节点表单属性的控制。

3、流程属性关联控制：比如有个下拉选项，选项A时候需要标题项展示，选择B时需要标题项隐藏。实现了下拉框和单选框对其他属性的控制功能。

工作流低代码非常适合学习、项目研发、私活项目开发等工作场景，实现大部分场景可以无需编码，通过拖拽表单+流程设计实现流程审批功能，大大减少了研发的工作量。

本次升级文档及源码地址：

https://www.yuque.com/qingfengaibiancheng/chq3gg/bmub3z

---