排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：
50010702506256
50010702506256
欢迎加群交流技术
原
vue-element-admin 常用表格与搜索栏界面搭配 。 element ui样式搭配。模板
分类:
前端
界面大概的样子：
代码（下方有vue3中的写法）：
<template>
<div class="app-container">
<el-form :inline="true">
<el-form-item label="角色名称" prop="roleName">
<el-input
placeholder="请输入角色名称"
clearable
size="small"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="权限字符" prop="roleKey">
<el-input
placeholder="请输入权限字符"
clearable
size="small"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
placeholder="角色状态"
clearable
size="small"
style="width: 240px"
>
<el-option
v-for="dict in roleType"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<!-- 注意vue3中的时间格式化写法是这种：YYYY-MM-DD -->
<el-date-picker
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="small"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="small"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
>导出</el-button
>
</el-col>
</el-row>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:header-cell-style="{background:'#f8f8f9',color:'#515a6e'}"
style="width: 100%;margin-top:10px;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"> </el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="tag"
label="标签"
width="100">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "ConsulManager",
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
}
},
data() {
return {
roleType:[{
label:"正常",
value:1
},{
label:"停用",
value:2
}],
tableData: [{
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1518 弄',
tag: '家'
}, {
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1517 弄',
tag: '公司'
}, {
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1519 弄',
tag: '家'
}, {
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1516 弄',
tag: '公司'
}],
multipleSelection: []
}
}
};
</script>
vue3中的写法：
<template>
<div class="app-container">
<el-form :inline="true">
<el-form-item label="创建时间">
<el-date-picker size="default" v-model="dateRangeValue" style="width: 240px" value-format="YYYY-MM-DD"
type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="default" :icon="Search" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain :icon="Plus" size="mini">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain :icon="Edit" size="mini">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain :icon="Delete" size="mini">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain :icon="Edit" size="mini">导出</el-button>
</el-col>
</el-row>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" style="width: 100%; margin-top: 10px"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column label="日期" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="tag"
label="标签"
width="100">
<template #default="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload,Plus } from '@element-plus/icons-vue'
import { reactive, toRefs } from 'vue'
const state = reactive({
tableData: [
{
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1518 弄',
tag: '家'
},
{
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1517 弄',
tag: '公司'
},
{
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1519 弄',
tag: '家'
},
{
date: '2017-05-01',
name: '杜小虎',
address: '上海市普陀区金沙江路 1516 弄',
tag: '公司'
}
],
dateRangeValue: "",
multipleSelection: [],
tableHeader: []
})
const { tableData, tableHeader,dateRangeValue } = toRefs(state)
const handleSelectionChange = (val) => {
state.multipleSelection = val
}
const handleSearch = () => {
alert(state.dateRangeValue)
}
</script>
<style lang="scss">
.app-container {
margin: 20px;
background-color: #fff;
padding: 20px;
}
</style>欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)
评价