技术标签: 前端 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>
文章浏览阅读6.9k次。WCE 下载地址:链接:https://share.weiyun.com/5MqXW47 密码:bdpqku工具界面_wce.exe -s aaa:win-9r7tfgsiqkf:00000000000000000000000000000000:a658974b892e
文章浏览阅读4.5k次。Weather Globe(Mackiev)Google Earth(Google)Virtual Earth(Microsoft)World Wind(NASA)Skyline Globe(Skylinesoft)ArcGISExplorer(ESRI)国内LTEarth(灵图)、GeoGlobe(吉奥)、EV-Globe(国遥新天地) 软件名称: 3D Weather Globe(http:/_网络地球仪
文章浏览阅读1.9w次,点赞113次,收藏57次。我要买这些东西,然后震惊整个办公室_程序员展示刀,产品经理展示枪
文章浏览阅读1.6w次,点赞7次,收藏63次。霍尔信号、编码器信号与电机转向从电机出轴方向看去,电机轴逆时针转动,霍尔信号的序列为编码器信号的序列为将霍尔信号按照H3 H2 H1的顺序组成三位二进制数,则霍尔信号翻译成状态为以120°放置霍尔为例如不给电机加电,使用示波器测量三个霍尔信号和电机三相反电动势,按照上面所说的方向用手转动电机得到下图① H1的上升沿对应电机q轴与H1位置电角度夹角为0°,..._霍尔信号
文章浏览阅读7.1k次,点赞5次,收藏36次。个人微信淘宝客返利机器人搭建一篇教程全搞定天猫淘宝有优惠券和返利,仅天猫淘宝每年返利几十亿,你知道么?技巧分享:在天猫淘宝京东拼多多上挑选好产品后,按住标题文字后“复制链接”,把复制的淘口令或链接发给机器人,复制机器人返回优惠券口令或链接,再打开天猫或淘宝就能领取优惠券啦下面教你如何搭建一个类似阿可查券返利机器人搭建查券返利机器人前提条件1、注册微信公众号(订阅号、服务号皆可)2、开通阿里妈妈、京东联盟、拼多多联盟一、注册微信公众号https://mp.weixin.qq.com/cgi-b_怎么自己制作返利机器人
文章浏览阅读2.1k次,点赞2次,收藏5次。技术分享时应秉持的基本原则:应有团队和个人、奉献者(统筹人)的概念,同时匹配团队激励、个人激励和最佳奉献者激励;团队应该打开工作内容边界,成员应该来自各内容方向;评分标准不应该过于模糊,否则没有意义,应由客观的基础分值以及分团队的主观综合结论得出。应有心愿单激励机制,促进大家共同聚焦到感兴趣的事情上;选题应有规范和框架,具体到某个小类,这样收获才有目标性,发布分享主题时大家才能快速判断是否是自己感兴趣的;流程和分享的模版应该有固定范式,避免随意的格式导致随意的内容,评分也应该部分参考于此;参会原则,应有_技术分享
文章浏览阅读1k次。在模板中,我们使用了标签,将由o2-view组件负责渲染,给o2-view传入了两个参数:app="内容管理数据"和name="所有信息",我们将在o2-view组件中使用这两个参数,用于展现“内容管理数据”这个数据应用下的“所有信息”视图。在o2-view组件中,我们主要做的事是,在vue组件挂载后,将o2的视图组件,再挂载到o2-view组件的根Dom对象。当然,这里我们要在我们的O2服务器上创建好数据应用和视图,对应本例中,就是“内容管理数据”应用下的“所有信息”视图。..._vue2 oa
文章浏览阅读222次。table是lua中非常重要的一种类型,有必要对其多了解一些。
文章浏览阅读549次,点赞30次,收藏9次。我们前面学习都有一个概念,被private封装的资源只能类内部访问,外部是不行的,但这个规定被反射赤裸裸的打破了。反射就像一面镜子,它可以清楚看到类的完整结构信息,可以在运行时动态获取类的信息,创建对象以及调用对象的属性和方法。
文章浏览阅读1.1k次,点赞35次,收藏12次。Logical Volume Manager,逻辑卷管理能够在保持现有数据不变的情况下动态调整磁盘容量,从而提高磁盘管理的灵活性/boot分区用于存放引导文件,不能基于LVM创建PV(物理卷):基于硬盘或分区设备创建而来,生成N多个PE,PE默认大小4M物理卷是LVM机制的基本存储设备,通常对应为一个普通分区或整个硬盘。创建物理卷时,会在分区或硬盘的头部创建一个保留区块,用于记录 LVM 的属性,并把存储空间分割成默认大小为 4MB 的基本单元(PE),从而构成物理卷。
文章浏览阅读379次,点赞7次,收藏10次。4、Dielecteic voltage-withstand test 介电耐压试验。1、Maximum output voltage test 输出电压试验。6、Resistance to crushing test 抗压碎试验。8、Push-back relief test 阻力缓解试验。7、Strain relief test 应变消除试验。2、Power input test 功率输入试验。3、Temperature test 高低温试验。5、Abnormal test 故障试验。
文章浏览阅读535次。镜像烧写说明_正点原子 imx6ull nand 烧录