简易版垂直表头的表格（vue版本）

最新推荐文章于 2023-12-06 16:23:16 发布

Akatsuki233

最新推荐文章于 2023-12-06 16:23:16 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue element-ui

本文链接：https://blog.youkuaiyun.com/Akatsuki233/article/details/89088726

vue 同时被 2 个专栏收录

46 篇文章

订阅专栏

element-ui

29 篇文章

订阅专栏

本文介绍了两种在Vue中创建带有垂直表头的表格的方法，提供了具体的操作步骤和替换代码，最后展示了实施效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>垂直表头</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <div class="layout">
      <div class="vertical">姓名</div>
      <div class="vertical">
        <el-input v-model="form.name"></el-input>
      </div>
      <div class="vertical">年龄</div>
      <div class="vertical">
        <el-input v-model="form.age"></el-input>
      </div>
    </div>
    <div class="layout">
      <div class="vertical">班级</div>
      <div class="vertical">
        <el-input v-model="form.class"></el-input>
      </div>
      <div class="vertical">学号</div>
      <div class="vertical">
        <el-input v-model="form.num"></el-input>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      form: {
        name: '小明',
        age: '16',
        class: '8班',
        num: '23322'
      }
    }
  })
</script>
<style>
  .layout {
    width: 450px;
    margin: 0 auto;
  }
  .vertical {
    width: 100px;
    height: 35px;
    border: 1px solid rgba(0, 0, 0, .3);
    float: left;
    text-align: center;
    line-height: 35px;
    margin-top: -1px;
  }
  .layout .el-input__inner {
    width: 100px;
    height: 30px;
    vertical-align: middle;
  }
</style>
</html>

方法二

把app中的内容替换成

        <el-form :model="addForm" :rules="rules" ref="addForm">
          <el-form-item class="vertical"><i class="redSymbol">*</i>密码</el-form-item>
          <el-form-item class="vertical speForm" prop="password">
            <el-input type="password" v-model="addForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="vertical" prop="age"><i class="redSymbol">*</i>确认密码</el-form-item>
          <el-form-item class="vertical speForm" prop="checkPass">
            <el-input type="password" v-model="addForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form >

效果图