Element Plus表格的基本使用

最新推荐文章于 2024-08-17 20:46:26 发布

拿铁喝布丁

最新推荐文章于 2024-08-17 20:46:26 发布

阅读量3.5k

点赞数 3

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/m0_64397933/article/details/125477620

版权

这篇博客介绍了如何在Vue项目中安装和使用Element Plus组件库，特别是展示了如何创建一个包含选择、列对齐、模板和数据操作的表格。通过在main.js中引入并挂载，然后在模板中定义表格结构，结合数据来展示内容。同时，文章还提供了数据源获取和操作按钮的实现，包括查看详情、编辑和删除功能，并提示读者可以查阅官方文档获取更多组件属性和事件。

摘要由CSDN通过智能技术生成

首先，安装Element Plus组件库，官方给了三种安装方法，你可以选择自己喜欢的：

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在main.js引用

const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");

已安装的同学可以忽略以上步骤

效果图：

页面中使用：
其中data代表要显示的数据；prop代表字段名称，对应列内容的字段名，也可以使用 property属性；

更多属性和事件请看官方文档：https://element-plus.gitee.io/zh-CN/component/table.html#table-事件

<template>
    <el-table :data="tableData" style="width: 100%">
		<el-table-column type="selection"/>
		<el-table-column label="项目名称" prop="name" align="center" />
		<el-table-column label="项目性质" prop="nature" align="center" />
		<el-table-column label="需求工种" prop="craft" align="center"/>
		<el-table-column label="需求人数" prop="nums" align="center">
			<template #default="scope">
				<div>
				    {{scope.row.nums}}人
				</div>
			</template>
		</el-table-column>
		<el-table-column label="工作周期" prop="data1" align="center" width="150">
			<template #default="scope">
				<div>
					{{scope.row.date1}}至{{scope.row.date2}}
				/div>
			</template>
		</el-table-column>
		<el-table-column label="工作地点" prop="add" align="center" />
		<el-table-column label="薪资待遇" prop="money" align="center" />
		<el-table-column label="受理状态" align="center" prop="status">
			<template #default="scope">
				<div class="com" :style="scope.row.status=='已受理'?'color:#7E9CFF':'color:#DC143C'">
					{{scope.row.status}}
				</div>
			</template>
	    </el-table-column>
		<el-table-column label="操作" align="center" width="210">
			<template #default="scope">
				<el-button size="small" @click="details(scope.$index, scope.row)">详情</el-button>
				<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
:disabled="scope.row.status=='已受理'?true:false">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)":disabled="username=='admin'?false:true">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup lang="ts">
    const tableData = ref([]);//声明空数组
    getFiliale().then((e) => {
		tableData.value = e.data.data;//接口数据赋值，我这里使用的是mock数据，使用接口数据一样的道理
	})
</script>