首页 > 专利信息

【基于vue3对element-plusTable二次封装,render函数实现自定义内容...

【基于vue3对element-plusTable⼆次封装，render函数实现⾃定义内容】

最近没有⼯作，写点⼩项⽬。写写笔记记录⼀下。

这⾥把element-plus的table进⾏⼆次封装，实现“显⽰/隐藏列”、“按钮插槽”以及实现类似iview框架直接的在表头⾥⾯写render函数。

1.封装效果

2. 实现代码

A-table.vue

HTML部分

<div >

<div >

</div>

<div >

<el-popover placement="bottom"trigger="click"title="显⽰/隐藏列"width="340px">

<el-button :icon="Filter"size="mini"></el-button>

</template>

<el-checkbox-group v-model="checkedValue"@change="handleColumnsChange">

<el-checkbox v-for="item in checkColumns":key="item.prop":label="item.label"></el-checkbox>

</el-checkbox-group>

</el-popover>

</div>

<el-table

:data="tableDataValue"

v-loading="options.loading"

:size="options.size"

:max-height="options.maxHeight"

stripe="options.stripe"

:border="options.border"

:fit="options.fit"

:highlight-current-row="options.heightCurrentRow"

:lazy="options.lazy"

ref="eleTable"

@row-click="clickRow"

@row-dblclick="dblclickRow"

@row-contextmenu="contextmenu"

@header-click="headClick"

@header-contextmenu="headcontextmenu"

@select="select"

@select-all="selectAll"

@current-change="rowChange"

@selection-change="handleSelectionChange">

<el-table-column v-if="pe === 'selection'"type="selection":width="item.minWidth?item.minWidth : 60"></el-table-column>

<el-table-column v-else-if="pe === 'index'"type="index":label="item.label?item.label : '序号'":width="item.minWidth?item.minWidth : 80":alig n="item.align?item.align : 'center'"></el-table-colu

mn>

<el-table-column v-else

:prop="item.prop"

:label="item.label"

:align="item.align"

:min-width="item.minWidth"

show-overflow-tooltip="true"

</template>

<E-expand :column="item":row="w":render="der":index="scope.$index"/>

</template>

</el-table-column>

</template>

</el-table>

<div >

<el-pagination

currentPage="pageNum"

:page-size="mPageSize"

:page-sizes="pageSizeOpts"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

@size-change="handleSizeChange"

@current-change="handleCurrentChange">

</el-pagination>

</div>

</div>

JS部分

import{ computed, getCurrentInstance, onMounted, reactive, toRefs, watch,toRaw }from'vue'

import{useStore}from'vuex'

import{Filter, ElMessage}from'@element-plus/icons-vue'

import EExpand from'./eExpand'

export default{

components:{EExpand },

name:'IviewVue3JsATable',

props:{

config:{type: Object},

action:{type: String},// 请求地址

tableHeight:{type: Number},

size:{type: String},

pageSize:{type: Number,default:10},

options:{// 表格配置项

type: Object,

default:()=>{

return{

// height: 400,

stripe:false,// 斑马纹

highlightCurrentRow:true,// 是否要⾼亮当前⾏

border:false,// 是否有纵向边框

fit:false,// 列的宽度是否⾃撑开

size:'medium',// Table 的尺⼨

maxHeight:600,// Table 的最⼤⾼度。

loading:false,//是否需要等待效果

lazy:false,// 是否需要懒加载

}

setup(props, context){

const store =useStore()

const{proxy}=getCurrentInstance()

const state =reactive({

isRowChange:false,// 表格列是否改变

checkedValue:[],// 复选框已选数据

tableDataValue:[],

total:0,// 表格数据总数

mPageSize: props.pageSize,

pageNum:1,

})

/**复选框参数与配置 (START) */

// 复选框选择项

const checkColumns =computed(()=>{lumns.filter(i => i.label)})

// 复选框已选项 -model

const checked =computed(()=>{return proxy.checkColumns.map((i, index)=>{return i.label})})

/**复选框参数与配置 (END) */

onMounted(()=>{

getData()

state.checkedValue = checked.value

})

/**表格参数和配置 (START) */

const tableConfig =computed(()=>{fig.table}).value

// 筛选后的表头

const filterColumns =computed(()=>{

if(!state.isChange)lumns

lumns.filter( i =>!i.type && state.checkedValue.includes(i.label)|| i.type)}) /**表格参数和配置 (END) */

/**表格参数和配置 (END) */

/**每页展现条数选择项 */

const pageSizeOpts =computed(()=>{return[...new Set([10,20,30,40, proxy.pageSize])].sort((a, b)=> a-b)})

const getData=async()=>{

if(!props.action)return

props.options.loading =true

const{ data, err}=await store.dispatch(props.action,{pageNum: state.pageNum, pageSize: state.mPageSize,...proxy.formObj.formData()}) props.options.loading =false

if(err)return ElMessage({showClose:true,message: err,type:'error',center:true,duration:3000})

state.tableDataValue = ds

}

// 表头筛选触发事件

const handleColumnsChange=(value)=>{

state.isChange =true

state.value = value

}

// 单击⾏事件

const clickRow=(row, column, event)=>{

let data ={row,column,event}

}

// 双击⾏事件

const dblclickRow=(row, column, event)=>{

let data ={row,column,event}

}

// 右击⾏事件

const contextmenu=(row, column, event)=>{

let data ={row,column,event}

}

// 头部列点击事件

const headClick=(row, column, event)=>{

let data ={row,column,event}

}

// 头部列右击事件

const headcontextmenu=(row, column, event)=>{

let data ={row,column,event}

}

/ 勾选复选框事件

const select=(row, column, event)=>{

let data ={row,column,event}

}

// 勾选全选事件

const selectAll=(row, column, event)=>{

let data ={row,column,event}

}

// ⾏改变事件

const rowChange=(row, column, event)=>{

let data ={row,column,event}

}

// 多⾏选中事件

const handleSelectionChange=(row, column, event)=>{

let data ={row,column,event}

}

// 页⾯展现条数事件

jumper2const handleSizeChange=(pageSize)=>{

proxy.mPageSize = pageSize

getData()

console.log('pageSize :>> ', pageSize);

}

// 页⾯跳转事件

const handleCurrentChange=(pageNum)=>{

proxy.pageNum = pageNum

getData()

console.log('pageNum :>> ', pageNum);

}

const handleEdit=(index, row)=>{

console.log('scope',toRaw(row))

}

return{

Filter,

...toRefs(state),

tableConfig,

checkColumns,

filterColumns,

pageSizeOpts,

handleEdit,

clickRow,

dblclickRow,

contextmenu,

headClick,

headcontextmenu,

select,

selectAll,

rowChange,

handleSelectionChange,

handleColumnsChange,

handleSizeChange,

handleCurrentChange

}

</script>

E-expand.js

import{ h,getCurrentInstance,defineComponent }from'vue'; export default defineComponent({

name:'Expand',

props:{

row: Object,

render: Function,

index: Number,

column:{

type: Object,

default:null

}

// proxy: getCurrentInstance(),

render(){

}

})

3.调⽤⽅法

引⼊组件

import{ATable}from'_c/table'

本文发布于:2024-09-21 10:41:17，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/2/351168.html

上一篇：四川省成都市高职单招2023年英语第二次模拟卷(附答案)

下一篇：2023年高一第二学期月考英语作文

标签：事件表格是否实现配置复选框参数

留言与评论（共有 0 条评论）