• iview table 普通表格样式


    iview table 普通表格样式

    https://run.iviewui.com/UvLFPMb0

    <template>
      <table>
        <thead>
          <tr>
            <th>属性</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>mode</td>
            <td>菜单类型,可选值为 <code>horizontal</code>(水平) 和 <code>vertical</code>(垂直)</td>
            <td>String</td>
            <td>vertical</td>
          </tr>
          <tr>
            <td>theme</td>
            <td>主题,可选值为 <code>light</code>、<code>dark</code>、<code>primary</code>,其中 primary 只适用于 <code>mode="horizontal"</code></td>
            <td>String</td>
            <td>light</td>
          </tr>
          <tr>
            <td>active-name</td>
            <td>激活菜单的 name 值</td>
            <td>String | Number</td>
            <td>-</td>
          </tr>
          <tr>
            <td>open-names</td>
            <td>展开的 Submenu 的 name 集合</td>
            <td>Array</td>
            <td>[]</td>
          </tr>
          <tr>
            <td>accordion</td>
            <td>是否开启手风琴模式,开启后每次至多展开一个子菜单</td>
            <td>Boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>width</td>
            <td>导航菜单的宽度,只在 <code>mode="vertical"</code> 时有效,如果使用 <code>Col</code> 等布局,建议设置为 <code>auto</code></td>
            <td>String</td>
            <td>240px</td>
          </tr>
        </tbody>
      </table>
    </template>
    <style>
    code {
      display: inline-block;
      background: #f7f7f7;
      font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
      margin: 0 3px;
      padding: 1px 5px;
      border-radius: 3px;
      color: #666;
      border: 1px solid #eee;
    }
    table {
      font-family: Consolas, Menlo, Courier, monospace;
      font-size: 12px;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #e9e9e9;
       100%;
      margin-bottom: 24px;
    }
    table th {
      background: #f7f7f7;
      white-space: nowrap;
      color: #5c6b77;
      font-weight: 600;
    }
    table td,
    table th {
      border: 1px solid #e9e9e9;
      padding: 8px 16px;
      text-align: left;
    }
    </style>
    <script>
    export default {
      data () {
        return {
          index: 1,
          formDynamic: {
            items: [
              {
                value: '',
                index: 1,
                status: 1
              }
            ]
          }
        }
      },
      methods: {
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.$Message.success('Success!');
            } else {
              this.$Message.error('Fail!');
            }
          })
        },
        handleReset (name) {
          this.$refs[name].resetFields();
        },
        handleAdd () {
          this.index++;
          this.formDynamic.items.push({
            value: '',
            index: this.index,
            status: 1
          });
        },
        handleRemove (index) {
          this.formDynamic.items[index].status = 0;
        }
      }
    }
    </script>
    

      

  • 相关阅读:
    【Wyn Enterprise BI知识库】 什么是商业智能 ZT
    Wyn BI的机会在哪里:越靠近消费者的行业,比如零售、文娱和金融,信息化投入越大 ZT
    客户化软件时代的前夜 ZT
    在“非软件企业”开发软件的困局 ZT
    行业观察报告:从SAAS困局看行业趋势 ZT
    超级干货 :一文读懂数据可视化 ZT
    传统BI还是自助式BI---BI与数据分析 ZT
    【BI学习笔记】在Linux上安装Wyn Enterprise商业智能报表服务器
    MAMP 配置: Mac with OSX 10.8 + (Mac + Apache + MySQL + Php)
    Emule Xtreme Kid eD2K 设置
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/10489295.html
Copyright © 2020-2023  润新知