无法在 vue-js 的 Element-UI 中对齐侧边栏及其内容答案

【问题标题】：Unable to align sidebar and it contents in Element-UI in vue-js无法在 vue-js 的 Element-UI 中对齐侧边栏及其内容
【发布时间】：2020-07-31 06:22:38
【问题描述】：

我是 vue-js 的新手，目前使用 element-ui 作为 UI 组件库。我正在尝试使用侧边栏并具有以下代码（单击 here 获取 jsfiddle）：-

<template>
<div>

<el-menu default-active="1" class="el-menu-vertical-demo" :collapse="true">
  <el-menu-item index="1">
    <i class="el-icon-money"></i>
    <span slot="title">Consent</span>
  </el-menu-item>
  <el-menu-item index="2" @click="signOut">
    <i class="el-icon-switch-button"></i>
    <span slot="title">Logout</span>
  </el-menu-item>
</el-menu>
<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="arn"
        label="ARN"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="Phone Number"
        width="180">
      </el-table-column>
      <el-table-column
        label="Status"
        prop="address">
          <el-badge value="Applied" class="item" type="primary"></el-badge>
      </el-table-column>
    </el-table>
</div>
</template>
<style>
  
</style>

<script>
import * as firebase from "firebase/app";
import "firebase/auth";
  export default {
    data() {
        return {
          tableData: [{
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }]
        }
      },
    methods: {
      ...
    }
  }
</script>

如上面的jsfiddle 链接所示，表格未与侧边栏右侧对齐。我在它的documentation 中搜索了它，但没有得到太多帮助。

希望有任何提示。

【问题讨论】：

标签： vuejs2 element-ui

【解决方案1】：

我不确定我是否理解你的问题，但你可以应用下一个 css 规则

.el-table .cell {
  text-align: right;
}

在<style></style> 标签内

这里有一个应用了规则的jsfiddle

【讨论】：

@VINEETSHARMA 可能是这样的jsfiddle.net/3dke1t8h
将 el-menu 和 el-table 放在单独的 div 中有效！

【解决方案2】：

为什么不用element-ui的布局系统？

<el-container>
    <el-aside></el-aside>
    <el-main></el-main>
</el-container>

示例：https://jsfiddle.net/dreijntjens/ba9zq7wt/10/

注意：默认情况下，side 的宽度为 300px，如果您只想使用 el-menu 宽度，则必须取消设置宽度 <el-aside width="unset"> 或像我在标签本身上所做的那样或

.el-aside {
    width: unset !important; // !important
}

【讨论】：

【解决方案3】：

试试这个 CSS 或样式：

<style>
#app {
  display: flex
}
</style>

它在表格左侧制作侧栏

通过更改表格和侧边栏的顺序，它将位于右侧

<div id="app">

   <el-table>
   ...

   </el-table>   

   <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="true">
   ....

【讨论】：