简单的Vue3

main.js部分

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

组件1

<template>
  <el-row>
    <el-col span="10">
      <el-input placeholder="">
        <template #prepend>名称</template>
      </el-input>
    </el-col>
    <ek-col>
      <el-button type="success" :icon="Search" id="searchIcon">搜索</el-button>
    </ek-col>
  </el-row>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
</script>

<script>
export default {
  name: "compOne"
}
</script>

<style scoped>
#searchIcon{
  margin-left: 20px;
}
</style>

组件2

<template>
  <el-col>
    <el-button type="success" :icon="Plus">添加</el-button>
    <el-button type="success" :icon="ElementPlus">修改</el-button>
    <el-button type="success" :icon="Close">删除</el-button>
    <el-button type="success" :icon="Plus">知识图谱的展示</el-button>
    <el-button-group style="margin-left: 50%">
      <el-button plain type="default" :icon="Refresh" />
      <el-button plain type="default" :icon="Operation" />
    </el-button-group>
  </el-col>
</template>

<script setup>
import {Plus,ElementPlus,Close,Refresh,Operation} from '@element-plus/icons-vue'
</script>

<script>
export default {
  name: "compTwo"
}
</script>

<style scoped>

</style>

组件3

<template>
  <el-table :data="data_list" border stripe>
    <el-table-column width="50">
      <el-radio model-value=radio_val></el-radio>
    </el-table-column>
    <el-table-column
        v-for="header in data_header"
        :key="header.prop"
        :prop="header.prop"
        :label="header.name"
        align="center"
    >
    </el-table-column>
  </el-table>
</template>

<script setup>
const data_list = [
  {
    col2: "ysg",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "****",
    col6: "ysg 来源:管理员 创建于..."
  },
  {
    col2: "qhs",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "****",
    col6: "qhs 来源:管理员 创建于..."
  },
  {
    col2: "yxy",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "****",
    col6: "yxy 来源:管理员 创建于..."
  },
  {
    col2: "yxl",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "****",
    col6: "yxl 来源:管理员 创建于..."
  },
  {
    col2: "cxf",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "****",
    col6: "cxf 来源:管理员 创建于..."
  },
  {
    col2: "xjm",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "****",
    col6: "xjm 来源:管理员 创建于..."
  }
]

const data_header = [
  {prop: "col2", name: "教师姓名"},
  {prop: "col3", name: "关系"},
  {prop: "col4", name: "学院名称"},
  {prop: "col5", name: "学校名称"},
  {prop: "col6", name: "教师信息"},
]
</script>

<script>
export default {
  name: "compThree"
}
</script>

<style scoped>

</style>

App.vue

<template>
  <span>teacher管理</span>
  <el-divider/>
  <comp-one></comp-one>
  <br/>
  <comp-two></comp-two>
  <br/>
  <comp-three></comp-three>
</template>

<script>
export default {
  name: 'App'
}
</script>

<script setup>
import CompOne from "@/components/compOne";
import CompTwo from "@/components/compTwo";
import CompThree from "@/components/compThree";


</script>