<template>
<div>
<
el-form
:mod
el="projectInfo"
lab
el-width="120px"
class="project
-form flex
-form"
>
<div class="form
-row">
<
el-form
-item lab
el="项目名称：">
<
el-input v
-mod
el="projectInfo.name" />
</
el-form
-item>
<
el-form
-item lab
el="项目编码：">
<
el-input v
-mod
el="projectInfo.code" />
</
el-form
-item>
<
el-form
-item lab
el="采集目的：">
<
el-input v
-mod
el="projectInfo.purpose" />
</
el-form
-item>
<
el-form
-item lab
el="参与者姓名：">
<
el-input v
-mod
el="projectInfo.participantName" />
</
el-form
-item>
<
el-form
-item lab
el="参与者手机：">
<
el-input v
-mod
el="projectInfo.participantPhone" />
</
el-form
-item>
</div>
<!
-- 第二行
-->
<div class="form
-row">
<
el-form
-item lab
el="设备名称：">
<
el-input v
-mod
el="projectInfo.deviceName" />
</
el-form
-item>
<
el-form
-item lab
el="设备类型：">
<
el-input v
-mod
el="projectInfo.deviceType" />
</
el-form
-item>
<
el-form
-item lab
el="采集次号：">
<
el-input v
-mod
el="projectInfo.collectionFileNumber" />
</
el-form
-item>
<
el-form
-item lab
el="设备映射：">
<
el-input v
-mod
el="projectInfo.deviceCategory" />
</
el-form
-item>
<
el-form
-item lab
el="开始时间：">
<
el-input v
-mod
el="projectInfo.startTime" />
</
el-form
-item>
</div>
<!
-- 第三行
-->
<div class="form
-row">
<
el-form
-item lab
el="业务与场景：">
<
el-input v
-mod
el="projectInfo.businessScene" />
</
el-form
-item>
<
el-form
-item lab
el="采集地域：">
<
el-input v
-mod
el="projectInfo.collectionRegion" />
</
el-form
-item>
<
el-form
-item lab
el="数据文件名：">
<
el-input v
-mod
el="projectInfo.dataFileName" />
</
el-form
-item>
<
el-form
-item lab
el="上传来源：">
<
el-input v
-mod
el="projectInfo.uploadSource" />
</
el-form
-item>
</div>
<div class="form
-footer">
<
el-button type="primary">搜索</
el-button>
<
el-button>重置</
el-button>
</div>
</
el-form>
<
el-divider />
<
el-table
:data="filteredData"
stripe
border
style="width: 100%"
v
-loading="loading"
:header
-c
ell
-style="{ background: '#f5f7fa' }"
>
<!
-- 使用 header 插槽插入
按钮 -->
<template #header>
<div style="text
-align: left">
<
el-button type="primary">单个参与者数据</
el-button>
<
el-button type="success">多个参与者csv文件</
el-button>
<
el-button type="warning">视频扫描</
el-button>
</div>
</template>
<
el-table
-column lab
el="序号" width="80"></
el-table
-column>
<
el-table
-column prop="source" lab
el="来源" width="80" />
<
el-table
-column prop="filename" lab
el="文件名" width="100">
<template #default="{ row }"> {{ row.filename }}... </template>
</
el-table
-column>
<
el-table
-column prop="status" lab
el="采集状态" width="100">
<template #default="{ row }">
<
el-tag
:type="row.status === '已覆盖' ? 'success' : 'warning'"
size="small"
>
{{ row.status }}
</
el-tag>
</template>
</
el-table
-column>
<
el-table
-column prop="projectName" lab
el="项目名称" min
-width="120" />
<
el-table
-column prop="projectCode" lab
el="项目编码" width="110" />
<
el-table
-column prop="purpose" lab
el="采集目的" min
-width="120" />
<
el-table
-column prop="participantId" lab
el="参与者身份" width="100" />
<
el-table
-column prop="content" lab
el="内容" width="80" />
<
el-table
-column prop="deviceCategory" lab
el="设备类别" width="100" />
<
el-table
-column prop="deviceName" lab
el="设备名" min
-width="120" />
<
el-table
-column prop="deviceType" lab
el="设备类型" min
-width="120" />
<
el-table
-column prop="business" lab
el="业务" width="100" />
<
el-table
-column prop="scene" lab
el="场景" width="100" />
<
el-table
-column prop="region" lab
el="地域" width="80" />
<
el-table
-column prop="startTime" lab
el="采集开始时间" width="150" />
<
el-table
-column prop="endTime" lab
el="采集结束时间" width="150" />
<
el-table
-column prop="other" lab
el="其他" width="80" />
</
el-table>
<div class="pagination
-container">
<
el-pagination
:page
-size="10"
:current
-page="currentPage"
layout="total, prev, pager, next"
:total="filteredData.length"
/>
</div>
</div>
</template>这样插槽不生效
本文深入探讨了CSS中按钮样式的定义方法，通过具体实例展示了如何使用内联样式为按钮设置宽度、高度、字体大小、颜色等属性，以及如何实现圆角效果和去除默认边框。
扫一扫
954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
