element-ui根据状态显示不同内容与点击按钮赋值

基于element-ui画页面之今日遇到的问题

<template>
  <div class="tabulate">
    <el-table :data="tableData" class="tabulate" border style="width: 100%">
      <el-table-column class="number" prop="date" label="版本号" width="170">
      </el-table-column>
      <el-table-column prop="name" label="文件大小" width="170">
      </el-table-column>
      <el-table-column prop="province" label="版本类型" width="170">
      </el-table-column>
      <el-table-column label="md5" width="170">
        <template slot-scope="scope">
          <el-button @click="changeMD(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="增量包状态" width="170">
      </el-table-column>
      <el-table-column label="操作" width="684">
        <template slot-scope="scope">
          <div v-if="scope.row.code==1" style="text-align: left;">
            <el-button type="text" size="small">下线</el-button>
            <el-button type="text" size="small" class="bag">下载完整包</el-button>
          </div>
          <div v-if="scope.row.code==0" style="text-align: left;">
            <el-button type="text" size="small">上线</el-button>
            <el-button @click="deleteRow" type="text" size="small">删除版本</el-button>
            <el-button type="text" size="small">更换版本文件</el-button>
            <el-button type="text" size="small">生成增量包</el-button>
            <el-button type="text" size="small">下载完整包</el-button>
            <el-button type="text" size="small">下载增量包</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="hidden" v-show="shopShow">
      <h4>MD5</h4>
      <p id="pp">{{md}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      changeMD(row) {
        this.shopShow = !this.shopShow;
        this.md = row.md || '';
      }
    },
    data() {
      return {
        shopShow: false,
        md: '',
        tableData: [{
          date: '1.0.0',
          name: '1002m',
          province: '大版本',
          city: '查看',
          address: '无',
          md: 'sdfef',
          code: 1 
        }, {
          date: '1.1.0',
          name: '1002.3m',
          province: '小版本',
          city: '查看',
          address: '生成中',
          md: 'fbgfth',
          code: 0 
        }]
      }
    }
  }
</script>

想法：
其中操作处，实现不同状态显示不同内容
获取到data里此列表的code 要写scope.row.data
在此处我设置了code值（1已完成0未完成）
于是实现下图

点击切换显示与隐藏 且在点击时赋值
设置默认为show：false
点击切换为显示 --> this.shopShow =!this.shopShow;

列表里分别给两个不同的值
data设置md:’ ’
p标签{{md}}

@click="changeMD(scope.row)"
changeMD(row){
         this.shopShow = !this.shopShow;//切换显示与隐藏
         this.md = row.md || '';
   }