Table 表格

注意

TIP

对element-ui table组件进行第二次封装，添加分页组件, 并将 element-table 方法属性合并。
table组件集成表格自动查询功能，通过lazyQuery 对象参数配置可实现自动查询，组件可通过模块名 moduleName和op 自动匹配请求路径，也可直接设置 url直接来指定请求地址，url优先级高于moduleName。注意只有配合system-menu组件才可配合moduleName实现自动查询。
table组件结合system-menu组件封装权限控制，system-menu注册组件的时候，会使用Vue.mixin 全局混入powerList权限属性，powerList具有权限根据moduleName 智能匹配该模块下所配置的所有op值来做权限控制，所以使用方法可在所有组件内直接使用v-if="powerList[op]"控制权限，注意只有配置了 moduleName的组件才能控制权限。
表格列组件一定使用ws-table-column，因为使用此组件表头列过滤属性才能起作用。使用方法、属性和el-table-column一致，只是改了一个名字。
table组件查询参数传值方法有两种，第一种可直接使用data属性searchOptions来控制，也可使用lazyQuery.beforeQuery()来传参，两者也可同时并存，并存时beforeQuery()传参优先级高于 data属性searchOptions。建议优先使用data属性searchOptions
表格添加表头过滤、alt + 左键可按Excel表格复制多行数据、自定义右键弹窗、布局方式功能。并保留其表格原始属性和方法。

使用

基础用法

示例

vue

<template>
	<ClientOnly>
		<ws-table
			ref="table"
			v-bind="tableConfig"
			@selection-change="selectionChange"
			@currentChange="handleCurrentChange"
		>
			<template #search>
				<search-group>
					<label for="">名称：</label>
					<el-input
						v-model="searchOptions.name"
						placeholder="搜索名称"
						clearable
					></el-input>
				</search-group>
				<search-group>
					<el-button-group>
						<ws-enter-event>
							<el-button type="primary" icon="el-icon-search" @click="search"
								>搜索</el-button
							>
						</ws-enter-event>
						<ws-throttle>
							<el-button
								type="primary"
								class="table-column-header-button"
								@click="reset"
								icon="el-icon-refresh-left"
							></el-button>
						</ws-throttle>
					</el-button-group>
					<el-button plain style="margin-left: 20px">新增</el-button>
				</search-group>
			</template>
			<template #options>
				<el-button @click="toggleSelection()">取消选择</el-button>
				<el-button @click="selectionChange()">获取选中项</el-button>
			</template>
			<template>
				<ws-table-column
					align="center"
					prop="name"
					label="名称"
				></ws-table-column>
				<ws-table-column
					align="center"
					prop="price"
					label="价格"
				></ws-table-column>
				<ws-table-column align="center" prop="status" label="状态">
					<template slot-scope="scope">
						<el-tag size="medium" v-if="scope.row.status" effect="plain"
							>上架</el-tag
						>
						<el-tag size="medium" v-else type="info" effect="plain"
							>下架</el-tag
						>
					</template>
				</ws-table-column>
				<ws-table-column align="center" prop="" label="操作">
					<template slot-scope="scope">
						<el-button
							type="text"
							v-if="powerList.getDetail"
							style="color: #0088ff"
							>详情</el-button
						>
					</template>
				</ws-table-column>
			</template>
		</ws-table>
	</ClientOnly>
</template>

<script>
export default {
	data() {
		return {
			//searchOptions固定字段名，用于表格查询参数配置。
			searchOptions: {
				name: '',
			},
			tableConfig: {
				multi: true,
				topFixedRange: 61,
				lazyQuery: {
					// url: '',    //表格查询url地址, url优先级高于moduleName，建议优先使用moduleName自动匹配请求地址
					moduleName: '/dispatch/quotaGlobal/list', //后台配置页面路径，对应当前页面路由path
					op: {
						//require,表格查询op
						selectList: 'selectList',
						selectCount: 'selectCount',
					},
					// beforeQuery: this.beforeQuery,  //可选,表格查询之前调用，可用于传查询参数，建议使用searchOptions代替
					// afterQuery: this.afterQuery,    //可选,表格查询之后调用，可用自定义格式化数据
					//immediate: true //是否立即查询，默认true,立即查询,false不立即查询
				},
			},
			selections: [],
			moduleName: '/dispatch/quotaGlobal/list', //后台配置页面路径，对应当前页面路由path
		}
	},
	methods: {
		search() {
			this.$refs.table.search()
		},
		reset() {
			this.$refs.table.reset()
		},
		selectionChange(val) {
			console.log(val)
		},
		handleCurrentChange(val) {
			console.log(val)
		},

		// beforeQuery(){
		//     return this.searchOptions
		// },
		// afterQuery(data){
		//     return data
		// },
	},
}
</script>

前端手动请求数据

vue

<template>
	<div class="page-wrap">
		<ws-table-el
			ref="table"
			v-bind="tableConfig"
			:col="8"
			@currentChange="currentChange"
		>
			<template #search>
				<search-group>
					<label for>模板名称：</label>
					<el-input
						v-model.trim="searchOptions.modelName"
						placeholder="请输入模板名称"
						maxlength="15"
						clearable
					></el-input>
				</search-group>
			</template>
			<template #options>
				<div class="text-right">
					<el-button-group>
						<el-button type="primary" icon="el-icon-search" @click="onSearch"
							>查询</el-button
						>
						<ws-throttle>
							<el-button
								type="primary"
								class="table-column-header-button"
								icon="el-icon-refresh-left"
								@click="onReset"
							></el-button>
						</ws-throttle>
					</el-button-group>
				</div>
			</template>
			<template #default>
				<ws-table-column-el
					prop="modelName"
					label="模板名称"
				></ws-table-column-el>
				<ws-table-column-el
					prop="iosVersionNum"
					label="iOS版本号"
				></ws-table-column-el>
				<ws-table-column-el
					prop="androidVersionNum"
					label="安卓版本号"
				></ws-table-column-el>
				<ws-table-column-el label="模板状态">
					<template slot-scope="{ row }">
						<el-tag v-if="row.status === 1" type="success">已启用</el-tag>
						<el-tag v-if="row.status === 0" type="info">未启用</el-tag>
					</template>
				</ws-table-column-el>
				<ws-table-column-el
					prop="updateTime"
					label="最后修改时间"
				></ws-table-column-el>
			</template>
		</ws-table-el>
	</div>
</template>

<script>
import { getHomePaegList } from '@/apis/homeConfig.js'

export default {
	name: 'manual-request',
	data() {
		return {
			searchOptions: {
				modelName: '',
			},
			moduleName: '/pagesConfig/homeConfig',
			tableConfig: {
				data: [],
				total: 0,
				pageSizeList: [20, 50, 100],
				filterColumns: false,
			},
			page: {
				currentPage: 1,
				pageSize: 20,
			},
		}
	},

	mounted() {
		this.getList()
	},

	methods: {
		currentChange({ currentPage, pageSize }) {
			this.page.currentPage = currentPage
			this.page.pageSize = pageSize

			this.getList()
		},

		// 搜索
		onSearch() {
			this.page.currentPage = 1
			this.getList()
		},
		// 重置
		onReset() {
			this.page.currentPage = 1
			this.getList()
		},

		async getList() {
			try {
				let res = await getHomePaegList({
					...this.page,
					body: this.searchOptions,
					op: 'create',
				})

				// 注意： 这里后台返回的是标准的json, OA老系统返回的是 字符串 ，需要JSON.parse(res.data)
				this.tableConfig.data = res.data || []

				this.tableConfig.total = res.total || 0
			} catch (error) {}
		},
	},
}
</script>

<style lang="less" scoped>
:deep(.option-box) {
	display: flex;
	justify-content: flex-end;
}
</style>

属性

参数	说明	类型	可选值	默认值
data	表格数据。不建议使用，使用 lazyQuery 配置	Array	-	[]
total	表格数据条数。不建议使用，使用 lazyQuery 配置	Number	-	0
pageSizeList	表格每页条数集合	Array	-	[20, 50, 100, 200]
lazyQuery	自动查询参数配置，参数参考上面 lazyQuery 配置	Object	-	-
filterColumns	是否需要表头列过滤	Boolean	-	true
hideColumnList	表格默认隐藏列，值为列属性label	Array	-	[]
indexColumn	表格是否显示自增index序号列	Boolean	-	true
emptyModel	表格无数据时默认显示表格表格无数据，true显示表格图片	Boolean	-	true
emptyText	表格无数据时显示内容	String	-	暂无您需要的数据
pagination	是否需要分页组件	Boolean	-	true
pageId	v1.2.3 新增属性，分页组件为true生效，是否用pageId分页。	String	-	-
pageCreateTime	分页组件为true生效，pageId分页排序规则。	String	-	-
loading	是否需要遮罩	Boolean	-	false
layout	布局方式，默认固定高度布局fixed，流式布局flow,无固定高度	String	flow/fixed	flow
topFixedRange	流式布局flow下，表头固定距离顶部距离，layout为fixed下无效	Number	-	0
multi	是否需要多选框	Boolean	-	false

lazyQuery 配置

参数	说明	类型	可选值	默认值
op		Object	{ selectCount: 'xxx', selectList: xxxxx }	无
moduleName	菜单配置中写的路由路径	String		无
beforeQuery	查询之前需要对参数处理，可以使用传递该函数	Function	() => {}
afterQuery	接口数据返回以后，需要对参数处理，可以使用传递该函数，函数需要返回数据-提供给vue-plugin中table做数据渲染	Function	() =>{}
immediate	是否立即调用查询,如果不希望立刻调用，则传false	Boolean	true/false	true

事件

事件名称	说明	回调参数
currentChange	currentPage或pageSize切换触发事件	({currentPage,pageSize})=> {}

方法

方法名	说明
search	表格查询，配置lazyQuery下生效参数{type} 0:只查询list，1：查询list && count ，2：重置页码并查询list && count
reset	表格查询重置
delData	表格删除操作，配置lazyQuery下生效，参数{op, url, data}
updateStatus	修改状态，配置lazyQuery下生效，参数{op, url, data, type = 1} ,type:1 上线下线，type:2 启用停用
refresh	手动触发表格更新重置页码，多选下清空选项

Slots 插槽

name	说明
search	表格查询条件框，使用方法见示例
options	表格副操作框，使用方法见示例
contextmenu	右键菜单功能

Table 表格 ​

注意 ​

使用 ​

基础用法 ​

属性 ​

lazyQuery 配置 ​

事件 ​

方法 ​

Slots 插槽 ​

Table 表格

注意

使用

基础用法

属性

lazyQuery 配置

事件

方法

Slots 插槽