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 class="mb-4">
      <el-col span="10">
      <el-input v-model="input" placeholder="请输入角色名称" /></el-col>
      <el-button type="primary" :icon="Search">查找</el-button>
    <el-button type="primary" :icon="Plus" id="s1">新建角色</el-button>
  </el-row>

</template>
<script setup>
import {
  Search,Plus
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const input = ref('')
</script>
<script>
export default {
  name: "comOne"
}
</script>

<style scoped>
#s1{
  margin-left: 1000px;
}
</style>

组件2：

<template>
  <el-table :data="data_list" stripe style="width: 100%">
<!--    <el-table-column prop="date" label=" " width="180" ><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-column label="角色权限等级">
      <el-row><el-button type="danger" plain>四级</el-button></el-row>
<!--      <el-button type="danger" plain>四级</el-button>-->
    </el-table-column>
    <el-table-column
        v-for="header in data_header2"
        :key="header.prop"
        :prop="header.prop"
        :label="header.name"
        align="center">

    </el-table-column>
    <el-table-column label="角色权限等级">
      <el-button type="warning">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>
</template>
<script setup>
const data_list = [
  {
    col2: "1",
    col3: "管理人员",
    col5:"asdasd",
  },
  {
    col2: "2",
    col3: "部门主管",
    col5:"qsadxzc",
  },
  {
    col2: "3",
    col3: "普通员工",
    col5:"qsadxzc",
  },
  {
    col2: "4",
    col3: "实习员工",
    col5:"qsadxzc",
  },

]

const data_header = [
  {prop: "col2", name: "序号"},
  {prop: "col3", name: "角色名称"},
]
const data_header2=[
  {prop:"col5",name:"角色描述"}
]
</script>
<script>
export default {
  name: "comTwo"
}
</script>

<style scoped>

</style>

组件3：

<template>
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

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

<style scoped>

</style>

app：

<template>
  <el-divider/>
  <com-one></com-one>
  <br/>
  <com-two></com-two>
  <br/>
  <com-thr></com-thr>
</template>
<script setup>
import ComOne from "@/components/comOne";
import ComTwo from "@/components/comTwo";
import ComThr from "@/components/comThr";

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

}
</script>