<template>
<div class="app
-container">
<!
-- 顶部操作按钮
-->
<div class="toolbar">
<
el-button type="primary" @click="handleAdd">新增设备</
el-button>
<
el-button type="danger" @click="handleD
elete">批量删除</
el-button>
<
el-button @click="handleExport">导出数据</
el-button>
</div>
<!
-- 设备列表
-->
<
el-table
:data="devices"
style="width: 100%"
@s
election
-change="handleS
electionChange"
>
<
el-table
-column type="s
election" width="55" />
<
el-table
-column lab
el="序号" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</
el-table
-column>
<
el-table
-column prop="type" lab
el="设备类型" width="150" />
<
el-table
-column prop="standardCount" lab
el="标准数量" width="120" />
<
el-table
-column prop="updatedBy" lab
el="更新人" width="120" />
<
el-table
-column prop="updatedAt" lab
el="更新时间" width="180">
<template #default="scope">
{{ formatTime(scope.row.updatedAt) }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="操作" width="180">
<template #default="scope">
<
el-button size="small" @click="handleEdit(scope.row)"> 编辑</
el-button>
<
el-button type="danger" size="small" @click="handleD
elete(scope.row)"> 删除</
el-button>
</template>
</
el-table
-column>
</
el-table>
</div>
</template>
<script>
import { ref } from 'vue';
import {
ElMessage } from '
element
-plus';
export default {
setup() {
const devices = ref([
{
id: 1,
type: '服务器',
standardCount: 20,
updatedBy: 'admin',
updatedAt: '2024
-05
-20T14:30:00Z'
},
// 其他设备数据...
]);
const s
electedRows = ref([]);
const handleAdd = () => {
// 新增设备逻辑
ElMessage('新增设备功能待开发');
};
const handleD
elete = (row) => {
if (row) {
// 单行删除
devices.value = devices.value.filter(d => d.id !== row.id);
}
else {
// 批量删除
devices.value = devices.value.filter(d => !s
electedRows.value.includes(d));
s
electedRows.value = [];
}
ElMessage.success(' 删除成功');
};
const handleEdit = (row) => {
// 编辑设备逻辑
ElMessage(`编辑设备ID: ${row.id}`);
};
const handleExport = () => {
// 导出数据逻辑
ElMessage('导出功能待开发');
};
const handleS
electionChange = (rows) => {
s
electedRows.value = rows;
};
const formatTime = (timestamp) => {
const date = new Date(timestamp);
return date.toLocaleString();
};
return {
devices,
handleAdd,
handleD
elete,
handleEdit,
handleExport,
handleS
electionChange,
formatTime
};
}
};
</script>
<style>
.app
-container {
padding: 20px;
height: 100vh;
display: flex;
flex
-direction: column;
}
.toolbar {
margin
-bottom: 20px;
display: flex;
gap: 10px;
}
.
el-table {
flex: 1;
}
</style>
本文详细介绍了Element UI库中的各种按钮类型（primary, info, warning, danger, success）、形状（default, plain, round, circle），以及文本按钮、禁用状态、图标位置、按钮组、加载状态和不同尺寸的实现。通过实例展示了如何创建和定制美观且功能丰富的前端按钮。
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
