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

Question

我是 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 link, table isn't getting aligned towards right of sidebar. I searched about it in its documentation但无法获得太多帮助。

如有任何提示，我们将不胜感激。

Answer 1

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

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

在 <style></style> 标签内

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

Answer 2

试试这个 css 或样式：

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

它在 table

的左侧制作侧边栏

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

<div id="app">

   <el-table>
   ...

   </el-table>   

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

Answer 3

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

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

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

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

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

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

Unable to align sidebar and it contents in Element-UI in vue-js

vuejs2

element-ui