elementUI vxe-table结合使用(通用表格)
App.vue 样式.my-main{margin: 20px;}.dfc{display: flex;flex-direction: column;}.dfr{display: flex;flex-direction: row;}.f1{flex: 1;}.fl{float: left;}.fr{float: right;}.baseColor{background-color:RGB(48,6
·
App.vue 样式
.my-main{
margin: 20px;
}
.dfc{
display: flex;
flex-direction: column;
}
.dfr{
display: flex;
flex-direction: row;
}
.f1{
flex: 1;
}
.fl{
float: left;
}
.fr{
float: right;
}
.baseColor{
background-color:RGB(48,65,86);color:#fff;
}
父组件
<!-- -->
<template>
<div class='f1 dfc my-main'>
<TableTemplate
:cols="columns"
:tData="tableData"
:pager="total"
@pageTrigger="pageChange"
:search="'fname'"
:operation="'add,export,seq,del,pager'"
@searchTrigger="search"
@operationTrigger="operation">
</TableTemplate>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import TableTemplate from '@/views/dashboard/tableTemplate'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
TableTemplate
},
data() {
//这里存放数据
return {
// 表头
columns: [
{
l: '公司名称',
p: 'fname',
w: null
},
{
l: '编号',
p: 'number',
w: null
},
{
l: '性别',
p: 'sex',
w: null
},
],
// 表数据
tableData: [
{
fname: 'feng',
number: '001',
sex: 0
},{
fname: 'xiao',
number: '123',
sex: 1
},{
fname: 'llll',
number: '244',
sex: 1
}
],
// 总条数
total: null,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
init(){
this.total = this.tableData.length
},
// 搜索
search(form) {
console.log('搜索', form)
},
// 表格操作
operation(data) {
console.log('表格操作', data)
},
// 分页
pageChange(data){
console.log("切换页数据", data);
// 根据 page size 请求数据
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.init()
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
子组件–通用表格
<!-- -->
<template>
<div class='f1 dfc'>
<div class="dfr" style=" margin-bottom: 20px;">
<div class="fl f1 dfr">
<div style="display: inline-flex;" v-if="isIncluded('fname')">
<span class="title">公司名称:</span>
<el-input
placeholder="请输入内容"
suffix-icon="el-icon-search"
v-model="searchForm.fname">
</el-input>
</div>
<div style="display: inline-flex;" v-if="isIncluded('number')">
<span class="title">编号:</span>
<el-input
placeholder="请输入内容"
suffix-icon="el-icon-search"
v-model="searchForm.number">
</el-input>
</div>
<el-button
v-if="search.length !== 0"
@click="handleSearch"
class="baseColor"
>
搜索
</el-button>
</div>
<div class="fr">
<el-button
type="success"
icon="el-icon-plus"
v-if="isIncluded('add')"
@click="add">
</el-button>
<el-button
type="primary"
v-if="isIncluded('export')"
class="baseColor"
@click="openExportEvent">
导出
</el-button>
<el-button
type="primary"
v-if="isIncluded('import')"
class="baseColor"
@click="importDataEvent">
导入
</el-button>
</div>
</div>
<div class="f1 dfc">
<vxe-table
border
stripe
align="center"
ref="xTable"
class="f1"
highlight-hover-row
:loading="loading"
:data="tData"
:export-config="{}">
<vxe-column
v-if="isIncluded('seq')"
type="seq"
title="序号"
width="60"
/>
<template v-for="(col, index) in cols">
<vxe-column
v-if="col.p === 'sex'"
:key="index"
:field="col.p"
:width="col.w"
:title="col.l"
:formatter="formatterSex"
/>
<vxe-column
v-else
:key="index"
:field="col.p"
:width="col.w"
:title="col.l"
/>
</template>
<vxe-table-column title="操作" width="150px" align="center" fixed="right" v-if="!isIncluded('noOperation')">
<template #default="{ row }">
<el-button
type="primary"
icon="el-icon-edit"
v-if="isIncluded('edit')"
@click="handleOption(row, 'edit')">
</el-button>
<el-button
type="danger"
icon="el-icon-delete"
v-if="isIncluded('del')"
@click="handleOption(row, 'del')">
</el-button>
<el-button
type="success"
icon="el-icon-view"
v-if="isIncluded('check')"
@click="handleOption(row, 'check')">
</el-button>
<el-button
type="success"
icon="el-icon-setting"
v-if="isIncluded('setting')"
@click="handleOption(row, 'setting')">
</el-button>
</template>
</vxe-table-column>
</vxe-table>
<!-- 分页 -->
<vxe-pager
perfect
v-if="isIncluded('pager')"
:current-page="tablePage.currentPage"
:page-size="tablePage.pageSize"
:page-sizes="tablePage.pageSizes"
:total="tablePage.totalResult"
@page-change="pageChange"
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
</vxe-pager>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
props:{
// 接收父组件传过来的搜索的字段
search: {
type: String,
default: "",
},
// 接收父组件传过来的操作的按钮
operation: {
type: String,
default: "",
},
// 表头
cols: Array,
// 表数据
tData: Array,
// 分页总数
pager: Number,
},
components: {},
data() {
//这里存放数据
return {
searchForm:{
fname: null,
number: null,
},
// 分页
tablePage: {
currentPage: 1,
pageSize: 2,
pageSizes: [2, 4, 6, 8],
totalResult: this.pager
},
loading: false,
sexList: [
{
label: "男",
value: 1,
},
{
label: "女",
value: 0,
}
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
init(){
this.tablePage.totalResult = tData
},
// 根据页切换
pageChange(val){
this.tablePage.currentPage = val.currentPage
let page = val.currentPage
let limit = val.pageSize
this.$emit("pageTrigger", { page: val, form: this.searchForm });
},
// 判断显示
isIncluded(str) {
const searchArr = this.search.split(",");
const operationArr = this.operation.split(",");
if (searchArr.includes(str)) return true;
if (operationArr.includes(str)) return true;
return false;
},
// 点击搜索返回搜索内容给父组件
handleSearch() {
this.$emit("searchTrigger", this.searchForm);
},
// 点击表格中操作按钮
handleOption(row, action) {
this.$emit("operationTrigger", { row, action });
},
// 新建
add(){
console.log('add');
},
// 导出
openExportEvent(){
this.$refs.xTable.openExport()
},
// 导入
importDataEvent () {
this.$refs.xTable.importData()
},
formatterSex({ cellValue }) {
let item = this.sexList.find((item) => item.value === cellValue);
return item ? item.label : "";
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
span.title{
margin-left: 15px;
line-height: 40px;
}
.el-input{
flex: 1;
}
.el-button{
float: left;
border: none;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)