Element UI 看板界面示例 - 审签、代办消息展示

<div id='app'>
    <el-container style='height: 100vh;'>
      <!-- 左侧菜单栏 -->
      <el-aside width='200px'>
        <el-menu :default-active='activeMenu' @select='handleMenuSelect' class='el-menu-vertical-demo'>
          <el-menu-item index='1'>审签</el-menu-item>
          <el-menu-item index='2'>代办</el-menu-item>
        </el-menu>
      </el-aside>
<pre><code>  &lt;!-- 右侧内容区域 --&gt;
  &lt;el-container&gt;
    &lt;el-header style='height: 60px; line-height: 60px; padding: 0 20px;'&gt;
      &lt;span style='font-size: 20px; font-weight: bold;'&gt;{{ activeMenuText }}&lt;/span&gt;
    &lt;/el-header&gt;
    &lt;el-main&gt;
      &lt;el-card v-if='activeMenu === '1''&gt;
        &lt;div style='padding: 20px;'&gt;
          &lt;h3&gt;审签消息&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;消息1&lt;/li&gt;
            &lt;li&gt;消息2&lt;/li&gt;
            &lt;li&gt;消息3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/el-card&gt;
      &lt;el-card v-if='activeMenu === '2''&gt;
        &lt;div style='padding: 20px;'&gt;
          &lt;h3&gt;代办消息&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;消息4&lt;/li&gt;
            &lt;li&gt;消息5&lt;/li&gt;
            &lt;li&gt;消息6&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/el-card&gt;
    &lt;/el-main&gt;
  &lt;/el-container&gt;
&lt;/el-container&gt;
</code></pre>
  </div>
  <!-- 引入 Vue.js -->
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <!-- 引入 Element UI -->
  <script src='https://unpkg.com/element-ui/lib/index.js'></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          activeMenu: '1', // 默认选中的菜单项
          activeMenuText: '审签', // 默认选中的菜单项的文本
        };
      },
      methods: {
        handleMenuSelect(index) {
          this.activeMenu = index;
          if (index === '1') {
            this.activeMenuText = '审签';
          } else if (index === '2') {
            this.activeMenuText = '代办';
          }
        },
      },
    });
  </script>