Vue table表单切换实现效果

Vue表单切换实现效果

点击第一个链接 出现以下数据

点击第二个链接 ,我没有写后台所以没有数据, 可以自己写方法去获取数据复制给v-model 绑定的数组

首先给两个链接定义 一个num

点击第一个按钮时 设置num等于1 , 这样在table列表处定义 v-show ="num==1 ",当等于1 时 显示第一个table 当等于num 等于 2时 等于第二个table 这样就能实现 table 的转换

table代码在这里插入代码片

<el-table v-show="num==1" :data="applicationList" border v-loading="dataListLoading" style="width: 100%"
                @selection-change="selectionChangeHandle">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          :index="indexMethod"
          :resizable="false"
          type="index" label="序号" align="center" width="60px"></el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <div slot-scope="scope" class="g-operation-column">
            <el-link type="primary" size="mini" @click="show(scope.row)">编辑</el-link>
            &nbsp
            <el-link type="danger" size="mini" @click="del(scope.row)">删除</el-link>
          </div>
        </el-table-column>
      </el-table>

Data处定义 num

num 默认值设定为1 这样默认就打开 第一个table 设置为0 就是都不打开