技术标签: 前端 vue.js javascript
1.统一样式,通过slot插槽而非json配置项的形式,来兼容原有table的template写法,方便改造
2.列的显示隐藏控制,默认根据接口数据是否有返回绑定prop对应的字段,来实现列的权限控制显隐,也可通过外部传tableHeader来自行控制
3.合并分页器
<!--
* @Description: 公共table组件,可含分页器
* @使用方法:将<el-table>标签名替换为<my-table>即可, v-loading 指令需改为 :loading 绑定,其他所有属性方法的绑定和使用都和element-plus的table一致
* @个别事项:
1. 使用分页器需绑定 showPagination, 并传一个json配置参数 paginationConfig, 除了 @size-change 和 @current-change 两个方法直接绑定在table上外,分页器的其他原有属性统一加到 paginationConfig
2. tableHeader:默认只会渲染显示列表接口有返回的字段对应的prop列, 传了 tableHeader 则只会渲染 tableHeader 里有定义的字段列
* @例:
<my-table
:loading="loading"
:data="data"
@selection-change="selectTableChange"
@cell-click="selectRowFun"
:multipleSelection="multipleSelection"
showPagination
:paginationConfig="paginationConfig"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="ages" label="年龄" width="150"></el-table-column>
<my-table/>
-->
<template>
<el-table
v-bind="$attrs"
ref="table"
v-loading="loading"
:data="data"
:max-height="maxHeight"
:paginationConfig="null"
>
<children :key="key" />
</el-table>
<div class="operation-bar">
<div class="left-operation">
<div class="checkedCount" v-if="showCheckedCount">已选 {
{
multipleSelection.length }} 项</div>
<div class="operation-box">
<slot name="operation"></slot>
</div>
</div>
<div class="right-pagination">
<pagination v-if="showPagination" :pageConfig="_paginationConfig" @size-change="pageSizeChange" @current-change="currentPageChange" />
</div>
</div>
</template>
<script lang="ts" setup>
import {
cloneVNode,
Component,
computed,
reactive,
ref,
VNode,
readonly,
useSlots,
defineExpose,
watch,
defineProps,
defineEmits,
useAttrs,
nextTick,
onMounted,
onBeforeUnmount,
} from 'vue'
import pagination from './pagination.vue' // 分页组件
// import useVirtualScroll from './useVirtualScroll'
const props = defineProps({
loading: {
type: Boolean,
default: false,
},
maxHeight: {
type: [String, Number],
default: 720,
},
data: {
type: Array,
default: () => []
},
// 显示已选数量
showCheckedCount: {
type: Boolean,
default: false,
},
// 绑定的已选项数组
multipleSelection: {
type: Array,
default: () => []
},
// 可见的字段表头 ['filed1', 'filed2', 'filed3']
tableHeader: {
type: Object,
default: () => []
},
// 关闭自适应列宽 (用于解决列数小于3的表格在渲染时会出现数据抖动)
closeAutoCloumnWidth: {
type: Boolean,
default: false
},
// 使用分页器
showPagination: {
type: Boolean,
default: false
},
// 分页配置
paginationConfig: {
type: Object,
default: () => {
return {
total: 0,
currentPage: 1,
pageSize: 10,
pageSizes:[10, 30, 50, 100, 200, 500]
}
},
},
})
const emit = defineEmits([
"currentChange",
"sizeChange",
]);
interface IMyTableColumnProps {
prop?: string
label?: string
fixed?: 'left' | 'right' | boolean
visiable?: boolean
index?: boolean
}
function isElTableColumn(vnode: VNode) {
return (vnode.type as Component)?.name === 'ElTableColumn'
}
const table = ref()
let tableHeader:any = {
}
let headerCount: number = 0
const slotsOrigin = useSlots()
const attrs:any = useAttrs()
const slots = computed(() => {
/* 对 slot 进行分类 */
const main: VNode[] = [] // ElTableColumn 且存在 prop 属性
const left: VNode[] = [] // ElTableColumn 不存在 prop 属性,但 fixed="left" 或者为 selection选框
const other: VNode[] = [] // 其他
// 权限控制的可见列字段
let showKeys: string[] = [];
// 方式一:只显示接口返回的字段判断 (设置了字段可见权限,接口不会返回该相关字段)
if(props.data && props.data.length){
let tableDataItem: any = props.data[0]
showKeys = Object.keys(tableDataItem)
}
let isNullData = showKeys.length || props.tableHeader ? false : true; // 空数据时正常渲染表头
// 方式二:用外部传来的表头字段
console.log('外部props.tableHeader', props.tableHeader)
if(props.tableHeader){
tableHeader = JSON.parse(JSON.stringify(props.tableHeader));
}
if(JSON.stringify(tableHeader) !== '{}'){
showKeys = Object.keys(tableHeader).map(v=>v.replace(/^./, (L) => L.toLowerCase())) // 首字母转小写
}
slotsOrigin.default?.()?.forEach((vnode, index) => {
if(!vnode.props){
vnode.props = {
}
}
vnode.props.index = index; // 排序
if (isElTableColumn(vnode)) {
if(vnode.props && vnode.props.prop){
if(!isNullData){
vnode.props.visiable = showKeys.indexOf(vnode.props.prop) === -1 ? false : true;
}
// 构建可见列表头并缓存起来
if(props.data && vnode.props.visiable){
tableHeader[vnode.props.prop] = vnode.props.label
}else{
delete tableHeader[vnode.props.prop]
}
}
const {
prop, fixed, type } = vnode.props ?? {
}
if (prop !== undefined) return main.push(vnode)
// if (type === 'selection' && vnode.props) vnode.props.reserveSelection = true;
if (fixed === 'left' || type === 'selection') return left.push(vnode)
}
other.push(vnode)
})
console.log('实际tableHeader',tableHeader)
// 可见内容列少于3列则自适应宽度, 防止列数过少时撑不满table宽度出现断层
let showMain = main.filter(v=>{
return v.props && v.props.visiable !== false});
if(!props.closeAutoCloumnWidth && showKeys.length && showMain.length < 3){
main.forEach(vnode=>{
if(vnode.props) vnode.props.width = ''
})
key.value++
}
if(!props.closeAutoCloumnWidth && !showMain.length && other.length && other[0].props){
other[0].props.width = ''
key.value++
}
return {
main,
left,
other,
}
})
/* 列的排序与部分属性 */
const columns = reactive({
// slot 中获取的
slot: computed(() =>
slots.value.main.map(({
props }) => ({
prop: props!.prop,
label: props!.label,
fixed: props!.fixed,
visiable: props!.visiable ?? true,
}))
),
// 渲染使用的
render: computed(() => {
const res: IMyTableColumnProps[] = []
const slot = [...columns.slot]
res.push(...slot)
return res
}),
})
/* 重构 slot.main */
const refactorSlot = computed(() => {
const {
main } = slots.value
/* 对 slot.main 进行改写 */
const refactorySlot: VNode[] = []
columns.render.forEach(({
prop, visiable, fixed }) => {
if (!visiable) return
const vnode = main.find((vnode) => prop === vnode.props?.prop)
if (!vnode) return
const cloned = cloneVNode(vnode, {
fixed,
})
refactorySlot.push(cloned)
})
return refactorySlot
})
/* 强制更新 el-table-column */
const key = ref(0)
watch(refactorSlot, () => {
if(Object.keys(tableHeader).length !== headerCount){
// 初始表头已构建好则无需更新,否则数据刷新时会抖动闪烁
headerCount = Object.keys(tableHeader).length;
key.value += 1
nextTick(()=>{
table.value.doLayout()
})
}
})
/* 对外暴露的内容 */
defineExpose({
table, // el-table 实例的访问
columns: computed(() => readonly(columns.render)),
updateColumns(value: IMyTableColumnProps[]) {
},
})
const children = () => [...slots.value.left, ...refactorSlot.value, ...slots.value.other].sort((a: any, b: any)=>a.props.index - b.props.index)
console.log(children())
// 合并分页配置
const _paginationConfig = computed(() => {
const config = {
total: 0,
currentPage: 1,
pageSize: 10,
pageSizes: [10, 30, 50, 100, 200, 500],
layout: "total, sizes, prev, pager, next, jumper",
};
return Object.assign(config, props.paginationConfig);
});
// 切换分页
const currentPageChange = (pageIndex: number) => {
emit("currentChange", pageIndex);
}
const pageSizeChange = (pageSize: number) => {
emit("sizeChange", pageSize);
}
// 虚拟滚动
// const { visibleData, initVirtualScroll, handleSelectionAll, addListeners, removeListeners, getRowKeys} = useVirtualScroll();
// watch(()=>props.data, ()=>{
// initVirtualScroll(table, JSON.parse(JSON.stringify(props.data)))
// })
// onMounted(()=>{
// addListeners()
// })
// onBeforeUnmount(()=>{
// removeListeners()
// })
</script>
<style lang="less" scoped>
.operation-bar{
display: flex;
justify-content: space-between;
align-items: flex-end;
.left-operation{
text-align: left;
.checkedCount{
// padding-left: 10px;
font-size: 14px;
font-weight: 400;
color: #606266;
padding: 10px 0 10px 10px;
}
}
}
</style>
<template>
<el-pagination v-bind="pageConfig"></el-pagination>
</template>
<script lang="ts" setup>
import {
defineProps } from "vue";
defineProps({
pageConfig: {
type: Object,
default: () => ({
})
}
})
</script>
文章浏览阅读1w次,点赞2次,收藏27次。来源:机器人小妹 很多时候企业拥有重复,乏味且困难的工作流程,这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本,企业别无选择,只能自动化某些功能以降低生产成本。 通过数字化..._人工智能平台
文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面,而不必每次去手动操作重新运行,这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便,但是不是每个 electron 项目必须的,所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader,国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader
文章浏览阅读942次。在11.0 进行定制化开发,会根据需要去掉recovery模式的一些选项 就是在device.cpp去掉一些选项就可以了。_android recovery 删除 部分菜单
文章浏览阅读3.7k次。https://www.yuque.com/mnn/cn/cvrt_linux_mac基础依赖这些依赖是无关编译选项的基础编译依赖• cmake(3.10 以上)• protobuf (3.0 以上)• 指protobuf库以及protobuf编译器。版本号使用 protoc --version 打印出来。• 在某些Linux发行版上这两个包是分开发布的,需要手动安装• Ubuntu需要分别安装 libprotobuf-dev 以及 protobuf-compiler 两个包•..._mnn 编译linux
文章浏览阅读1.8k次。CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。1. 定义动画,名称为fadeIn@-webkit-keyf_css3入场效果淡入淡出
文章浏览阅读2.8k次。计算机系统应包括硬件和软件两个子系统,硬件和软件又必须依次分别包括中央处理器和系统软件。按人的要求接收和存储信息,自动进行数据处理和计算,并输出结果信息的机器系统。计算机是脑力的延伸和扩充,是近代科学的重大成就之一。计算机系统由硬件(子)系统和软件(子)系统组成。前者是借助电、磁、光、机械等原理构成的各种物理部件的有机组合,是系统赖以工作的实体。后者是各种程序和文件,用于指挥全系统按指定的要求进行..._计算机系统包括硬件系统和软件系统 软件又必须包括
文章浏览阅读7.9k次,点赞3次,收藏22次。一 定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面,即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单,只需把一个进程已调入内存的页面,按先后次序链接成一个队列,并设置一个指针,称为替换指针,使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应,因为在进程中,有些页面经常被访问,比如,含有全局变量、常用函数、例程等的页面,FIFO 算法并不能保证这些页面不被淘汰。这里,我_进程调度fifo算法代码
文章浏览阅读133次。rownum是oracle才有的写法,rownum在oracle中可以用于取第一条数据,或者批量写数据时限定批量写的数量等mysql取第一条数据写法SELECT * FROM t order by id LIMIT 1;oracle取第一条数据写法SELECT * FROM t where rownum =1 order by id;ok,上面是mysql和oracle取第一条数据的写法对比,不过..._mysql 替换@rownum的写法
文章浏览阅读790次,点赞3次,收藏4次。官网下载下载链接:http://www.eclipse.org/downloads/点击Download下载完成后双击运行我选择第2个,看自己需要(我选择企业级应用,如果只是单纯学习java选第一个就行)进入下一步后选择jre和安装路径修改jvm/jre的时候也可以选择本地的(点后面的文件夹进去),但是我们没有11版本的,所以还是用他的吧选择接受安装中安装过程中如果有其他界面弹出就点accept就行..._ecjelm
文章浏览阅读245次。原文链接:https://linux.cn/article-7801-1.htmlifconfigping <IP地址>:发送ICMP echo消息到某个主机traceroute <IP地址>:用于跟踪IP包的路由路由:netstat -r: 打印路由表route add :添加静态路由路径routed:控制动态路由的BSD守护程序。运行RIP路由协议gat..._ifconfig 删除vlan
文章浏览阅读224次。reduxredux里要求把数据都放在公共的存储区域叫store里面,组件中尽量少放数据,假如绿色的组件要给很多灰色的组件传值,绿色的组件只需要改变store里面对应的数据就行了,接着灰色的组件会自动感知到store里的数据发生了改变,store只要有变化,灰色的组件就会自动从store里重新取数据,这样绿色组件的数据就很方便的传到其它灰色组件里了。redux就是把公用的数据放在公共的区域去存..._redux redis
文章浏览阅读2.2k次,点赞3次,收藏6次。unzip版本不支持4G以上的压缩包所以要使用p7zip:Linux一个高压缩率软件wget http://sourceforge.net/projects/p7zip/files/p7zip/9.20.1/p7zip_9.20.1_src_all.tar.bz2tar jxvf p7zip_9.20.1_src_all.tar.bz2cd p7zip_9.20.1make && make install 如果安装失败,看一下报错是不是因为没有下载gcc 和 gcc ++(p7_linux 7za解压中文乱码