Vue首次使用Element

index.vue

这里加入的样式

 
 
    <template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="name" label="Name" width="180">
 
            <template #default="scope">
                <router-link :to="{ name: 'about', query: { id: scope.row.id } }">
                    {{ scope.row.name }}</router-link>
            </template>
        </el-table-column>
 
        <el-table-column prop="img" label="图片">
 
            <template #default="scope">
                <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="contain"
                    :preview-src-list="srcList" />
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts" setup>
import { CaretBottom } from '@element-plus/icons-vue'
interface User {
    date: string
    name: string
    address: string
}
const srcList = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: User
    rowIndex: number
}) => {
    if (rowIndex === 1) {
        return 'warning-row'
    } else if (rowIndex === 3) {
        return 'success-row'
    }
    return ''
}
 
const tableData = [
    {
        "id": 1,
        "name": "小米手机",
        "img": "https://cdn.cnbj1.fds.api.mi-img.com/product-images/blackshark5bj8dh4/2833.jpg"
    },
    {
        "id": 2,
        "name": "小米手机",
        "img": "https://cdn.cnbj1.fds.api.mi-img.com/product-images/blackshark5bj8dh4/2833.jpg"
    },
    {
        "id": 3,
        "name": "小米手机",
        "img": "https://cdn.cnbj1.fds.api.mi-img.com/product-images/blackshark5bj8dh4/2833.jpg"
    }
]
 
</script>
<style scoped>
.item {
    margin-top: 10px;
    margin-right: 40px;
}
 
.el-dropdown {
    margin-top: 1.1rem;
}
</style>

app.vue

这里面加入的容器的布局

 
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">Header</el-header>
      <el-container>
        <el-aside width="200px" class="shouye"> <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
  <router-link to="/">首页</router-link><br />
  <router-link to="/login">登录页面</router-link></el-aside>
        <el-main>  
 <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.header{
  background-color: aqua;
}
.shouye{
  background-color:aquamarine;
}
</style>

其他修改地方

这里面增加了