feat: 重新上传表格组件
This commit is contained in:
lilinyuan
293
src/fvcomponents/fvTable/index.vue
Normal file
293
src/fvcomponents/fvTable/index.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="fv-table-container">
|
||||
<!-- 表格头部按钮 -->
|
||||
<div class="fv-table-btn" v-if="tableConfig.btns">
|
||||
<div class="table-head-btn">
|
||||
<el-button
|
||||
v-for="btn in tableConfig.btns"
|
||||
:key="btn.key"
|
||||
:type="btn.type || ''"
|
||||
v-perm="btn.auth || ['*:*:*']"
|
||||
@click="handleClickBtns(btn.key)"
|
||||
>
|
||||
{{ btn.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列显示配置 -->
|
||||
<div v-if="isSettingCol">
|
||||
<el-tooltip effect="dark" content="列配置" placement="bottom">
|
||||
<el-button ref="buttonRef" link>
|
||||
<el-icon size="18"><Setting /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click">
|
||||
<div class="col-setting-checkall">
|
||||
<el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate" @change="changeIsShowAll"></el-checkbox>
|
||||
</div>
|
||||
<div class="col-setting-list">
|
||||
<el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
|
||||
<el-space direction="vertical" alignment="flex-start" :size="0">
|
||||
<el-checkbox
|
||||
v-for="item in tableConfig.columns"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:value="item.prop"
|
||||
/>
|
||||
</el-space>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格部分 -->
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="localData.list"
|
||||
v-loading="localData.loading"
|
||||
:row-key="tableConfig?.rowKey || 'id'"
|
||||
v-bind="$attrs"
|
||||
table-layout="auto"
|
||||
:show-overflow-tooltip="true"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChange"
|
||||
@row-click="rowClick"
|
||||
@row-dblclick="rowDblclick"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
ref="tableInstance"
|
||||
>
|
||||
<template #default>
|
||||
<fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
|
||||
<template v-if="column?.slots?.header" #[column?.slots?.header]="params">
|
||||
<slot :name="column?.slots?.header" v-bind="params || {}"></slot>
|
||||
</template>
|
||||
<template v-if="column?.slots?.default" #[column?.slots?.default]="params">
|
||||
<slot :name="column?.slots?.default" v-bind="params || {}"></slot>
|
||||
</template>
|
||||
</fvTableColumn>
|
||||
</template>
|
||||
<template #empty>
|
||||
<slot name="empty"></slot>
|
||||
</template>
|
||||
<template #append>
|
||||
<slot name="append"></slot>
|
||||
</template>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<fvPagination
|
||||
v-if="pagination"
|
||||
:current-page="localData.query.pageNum"
|
||||
:page-size="localData.query.pageSize"
|
||||
:page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="localData.total"
|
||||
@changeSize="handleSizeChange"
|
||||
@goPage="handleCurrentChange"
|
||||
>
|
||||
</fvPagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { requestList } from '../../api/common';
|
||||
|
||||
const props = defineProps({
|
||||
//表格配置
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
//若使用外部数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//是否使用分页
|
||||
pagination: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示列配置
|
||||
isSettingCol: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const tableInstance = ref()
|
||||
const buttonRef = ref()
|
||||
const popoverRef = ref()
|
||||
|
||||
const localData = reactive({
|
||||
list: [], // 表格数据
|
||||
query: {
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
},
|
||||
total: 0,
|
||||
loading: false,
|
||||
// 列展示设置
|
||||
columns: [],
|
||||
allColShow: true, // 默认全部列都展示
|
||||
indeterminate: false,
|
||||
checkGroup: []
|
||||
})
|
||||
|
||||
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick'])
|
||||
|
||||
const handleClickBtns = (key) => {
|
||||
emits('headBtnClick', key)
|
||||
}
|
||||
|
||||
const filterColumns = () => {
|
||||
localData.columns = props.tableConfig.columns.map(item=>{
|
||||
if(item.prop) {
|
||||
return {
|
||||
...item
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeIsShowAll = (val) => {
|
||||
if(val) {
|
||||
filterColumns()
|
||||
localData.indeterminate = false
|
||||
localData.checkGroup = props.tableConfig.columns.map(item=>item.prop)
|
||||
} else {
|
||||
localData.columns.length = 0
|
||||
localData.checkGroup.length = 0
|
||||
localData.indeterminate = false
|
||||
}
|
||||
}
|
||||
|
||||
const changeColShow = (val) => {
|
||||
if(val.length == props.tableConfig.columns.length) {
|
||||
localData.indeterminate = false
|
||||
localData.allColShow = true
|
||||
} else if(val.length !== props.tableConfig.columns.length && val.length != 0) {
|
||||
localData.allColShow = false
|
||||
localData.indeterminate = true
|
||||
} else {
|
||||
localData.indeterminate = false
|
||||
localData.allColShow = false
|
||||
}
|
||||
const template = []
|
||||
props.tableConfig.columns.forEach(item=>{
|
||||
val.forEach(v=>{
|
||||
if(item.prop == v) {
|
||||
template.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
localData.columns = template
|
||||
}
|
||||
|
||||
filterColumns()
|
||||
|
||||
const getList = async () => {
|
||||
const { api, params } = props.tableConfig
|
||||
const queryParmas = {...localData.query, ...params}
|
||||
if(api) {
|
||||
localData.loading = true
|
||||
try {
|
||||
const { code, data, msg } = await requestList(api, queryParmas)
|
||||
if ( code === 1000 ) {
|
||||
localData.list = data.rows
|
||||
localData.total = data.total
|
||||
localData.loading = false
|
||||
} else {
|
||||
ElMessage.error(msg)
|
||||
localData.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('请求数据失败')
|
||||
localData.loading = false
|
||||
}
|
||||
} else {
|
||||
localData.list = props.data
|
||||
}
|
||||
}
|
||||
|
||||
const selectionChange = (data) => {
|
||||
emits('selectionChange', data)
|
||||
}
|
||||
|
||||
const rowClick = (row, column) => {
|
||||
emits('rowClick', row, column)
|
||||
}
|
||||
|
||||
const rowDblclick = (row, column) => {
|
||||
emits('rowDblclick', row, column)
|
||||
}
|
||||
|
||||
const cellClick = (row, column) => {
|
||||
emits('cellClick', row, column)
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
localData.query.pageSize = val
|
||||
emits('getBaseQuery', localData.query)
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
localData.query.pageNum = val
|
||||
emits('getBaseQuery', localData.query)
|
||||
getList()
|
||||
}
|
||||
|
||||
watchEffect(()=>{
|
||||
if(localData.allColShow) {
|
||||
localData.checkGroup = props.tableConfig.columns.map(item=>item.prop)
|
||||
}
|
||||
})
|
||||
//刷新
|
||||
const refresh = ({resetPage=false}={}) => {
|
||||
resetPage ? localData.query.pageNum = 1 : null
|
||||
getList()
|
||||
}
|
||||
//改变loading状态
|
||||
const updateLoading = (status) => {
|
||||
localData.loading = status
|
||||
}
|
||||
//获取基础查询条件
|
||||
const getQuery = () => {
|
||||
return localData.query
|
||||
}
|
||||
|
||||
defineExpose({ refresh, updateLoading, getQuery, tableInstance })
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.col-setting-checkall {
|
||||
border-bottom: 1px solid rgb(210, 210, 213);
|
||||
}
|
||||
.col-setting-list {
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.table-head-btn {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.fv-table-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user