vue框架搭一个简单的表单界面

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')

第一个组件： 

<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>

第二个组件：

<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>

 第三个组件：

<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: "杨胜刚",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "清华大学",
    col6: "杨胜刚 来源:管理员 创建于..."
  },
  {
    col2: "乔海曙",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "华为",
    col6: "乔海曙 来源:管理员 创建于..."
  },
  {
    col2: "姚小义",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "北京大学",
    col6: "姚小义 来源:管理员 创建于..."
  },
  {
    col2: "喻旭兰",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "武当派",
    col6: "喻旭兰 来源:管理员 创建于..."
  },
  {
    col2: "陈雪飞",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "华山派",
    col6: "陈雪飞 来源:管理员 创建于..."
  },
  {
    col2: "肖曼君",
    col3: "包含于",
    col4: "金融与统计学院",
    col5: "少林",
    col6: "肖曼君 来源:管理员 创建于..."
  }
]

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 setup>
import CompOne from "@/components/compOne";
import CompTwo from "@/components/compTwo";
import CompThree from "@/components/compThree";


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

}
</script>

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


<!--</script>-->