vue3?實現(xiàn)關于?el-table?表格組件的封裝及調(diào)用方法
更新時間：2024年06月27日 15:07:50 作者：程序員-小李
這篇文章主要介紹了vue3?實現(xiàn)關于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
一、示例圖：
二、組件
<template>
<div class="sn-table" :class="props.colorType === 1 ? '' : 'bg-scroll'">
<el-table :data="tableData" :row-class-name="tableRowClassName" height="500" style="width: 100%;"
:default-sort="[{ prop: '正確率', order: 'descending' },{ prop: '未答題數(shù)', order: 'descending' }]"
:class="props.colorType === 1 ? '' : 'bg-scroll'">
<el-table-column align="center" :prop="item.keyName"
:sortable="item.keyName==='正確率'&&props.isExistSelect||item.keyName==='未答題數(shù)'&&props.isExistSelect?true:false"
:label="item.keyName" v-for="item in columns"
:width="item.width ? item.width + 'px' : ''">
<template #default="scope">
<div v-if="item.keyName==='正確率'&&props.isExistSelect" class="tag-list">
<el-progress :percentage="scope.row[item.keyName]" color="#00B386" :stroke-width="10" :text-inside="false"/>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang='ts' setup>
type TProps = {
tableData: any[]
columns: any[],
colorType: number, // 顏色類型
isExistSelect: boolean // 是否存在篩選項
}
const props = withDefaults(defineProps<TProps>(), {})
const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
if (rowIndex % 2 === 1) {
return props.colorType === 1 ? 'odd-row' : 'class-odd-row'
} else {
return props.colorType === 1 ? 'even-row' : 'class-even-row'
}
}
</script>
<style lang='scss' scoped>
.bg-scroll {
border-radius: 10px;
height: 96%;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 5px;
height: 0 !important;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #eeeeee;
}
}
.sn-table {
padding: 0 10px 0 20px;
:deep(.el-table) {
color: #ffffff !important;
tr {
td {
border: none;
padding: 16px 0;
font-size: 15px;
}
}
th.el-table__cell {
background: #141414 !important;
border: none;
color: #00B386;
font-size: 14px;
font-weight: 400;
}
.even-row {
background-color: #333 !important;
}
.odd-row {
background-color: #141414 !important;
}
.class-even-row {
background-color: #333 !important;
}
.class-odd-row {
background-color: #00B386 !important;
}
}
:deep(.el-scrollbar__wrap--hidden-default) {
background: #141414 !important;
}
:deep(.el-table--enable-row-hover) {
.el-table__body {
tr:hover>td.el-table__cell {
color: #8C8C8C;
background: #333 !important;
}
}
}
:deep(.el-table__inner-wrapper) {
&::before {
background-color: transparent;
}
}
:deep(.el-table .ascending .sort-caret.ascending){
border-bottom-color:#00B386 !important;
}
:deep(.el-table .descending .sort-caret.descending){
border-top-color:#00B386 !important;
}
.ok-text{
font-size: 35px;
font-weight: 300;
}
.tag-list{
width: 100%;
padding: 2px 0;
.tag-btn{
border-radius: 5px;
border: 1px solid #EF8714;
color: #EF8714;
padding: 1px 10px;
margin-right: 15px;
&:last-child{
margin-right: 0;
}
}
}
}
:deep(.el-progress){
width: 185px;
margin: 0 auto;
}
:deep(.el-progress__text){
span{
font-size: 16px;
}
}
:deep(.el-progress-bar__outer){
background: #D9D9D9;
}
</style>三、頁面調(diào)用
<details-table :tableData="knowInfo" :columns="knowColumns" :isExistSelect="false" :colorType="1"/>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CanvasVideo from "@/components/CanvasVideo.vue"
const knowInfo = ref<any[]>([])
const knowColumns = ref<any[]>([])
onMounted(()=>{
init()
})
//數(shù)據(jù)處理
const init = () => {
const datas = ref([
{studentName:'陳佳穎',correctRate:0,noAnswerCount:13},
{studentName:'丁靖蕓',correctRate:0,noAnswerCount:13},
{studentName:'谷雨恒',correctRate:0,noAnswerCount:13},
{studentName:'歐陽江源',correctRate:0,noAnswerCount:13},
{studentName:'任行寬',correctRate:0,noAnswerCount:13},
{studentName:'任彥宇',correctRate:0,noAnswerCount:13},
{studentName:'王驍南',correctRate:0,noAnswerCount:13},
{studentName:'吳駿揚',correctRate:0,noAnswerCount:13}
])
if (datas && datas.length > 0) {
datas.forEach((it: any, index:number) => {
knowInfo.value.push({
'行號': index+1,
'姓名': it.studentName,
'正確率': it.correctRate,
'未答題數(shù)': it.noAnswerCount
})
})
for (const key in knowInfo.value[0]) {
knowColumns.value.push({
keyName: key,
width: key === '行號' ? 140 : null
})
}
}
}
</script>四、其他
（1）自定義標題
<el-table :data="datas" style="width: 100%;">
<el-table-column label="" prop="name" align="center">
<template #header>
姓名
</template>
</el-table-column>
</el-table>（2）自定義下標
<el-table :data="datas" style="width: 100%;">
<el-table-column label="行號" align="center">
<template #default="{$index}">
{{$index+1}}
</template>
</el-table-column>
</el-table>（3）自定義內(nèi)容
<el-table :data="datas" style="width: 100%;">
<el-table-column label="姓名" prop="name" align="center">
<template #default="scope">
<div>{{scope.row.name}}s</div>
</template>
</el-table-column>
</el-table>（4）添加排序（升序、降序）
<el-table :data="datas" style="width: 100%;"
:default-sort="[{ prop: 'rank', order: 'descending' },{ prop: 'time', order: 'descending' }]">
<el-table-column label="排名" prop="rank" sortable align="center"/>
<el-table-column label="時長" prop="time" sortable align="center"/>
</el-table>（5）多選與單選
1. 單選
<el-table :data="datas" style="width: 100%;"
row-key="id" ref="multipleTable" highlight-current-row @row-click="rowselect" @selection-change="selectGroupChange">
<el-table-column type="selection" width="55" />
<el-table-column label="排名" prop="rank" align="center"/>
<el-table-column label="時長" prop="time" align="center"/>
</el-table>
<script setup lang="ts">
import { ref } from "vue"
const multipleTable = ref()
const handleList = ref([])
// 設置單選||顯示高亮
const rowselect = (row:any) => {
multipleTable.value.toggleRowSelection(row)
}
// 選擇多個單選框，只取最后選中的那一個
const selectGroupChange = (row:any) => {
if (row.length > 1) {
multipleTable.value.clearSelection()
multipleTable.value.toggleRowSelection(row.pop())
return
}
if (row.length == 1) {
handleList.value = row
} else {
handleList.value = []
}
}
</script>
<style lang='scss' scoped>
// 隱藏表頭選擇框
:deep(.el-table__header){
.el-checkbox{
display: none;
}
}
</style>2. 多選
<el-table :data="datas" style="width: 100%;"
row-key="id" @select="handleSelectionChange" @select-all="handleAllChange">
<el-table-column type="selection" width="55" />
<el-table-column label="排名" prop="rank" align="center"/>
<el-table-column label="時長" prop="time" align="center"/>
</el-table>
<script setup lang="ts">
// 選擇多個選擇框
const handleSelectionChange = (selecteds: any, row: any) => {}
// 全選
const handleAllChange= (row:any) => {}
</script>五、實例（實現(xiàn)樹形數(shù)據(jù)與懶加載）
示例圖：通過點擊當前節(jié)點，調(diào)用接口展示下一節(jié)點，實現(xiàn)列表的增刪改查
1、添加修改組件 EditForm.vue
<template>
<div>
<el-form
ref="menuEditForm"
:model="form"
:label-width="formLabelWidth"
:size="size"
:rules="rules"
clearable
>
<el-row>
<el-col :span="12">
<el-form-item label="父級字典：" prop="parentId">
<el-cascader ref="myCascader" v-model="form.parentId" :props="{ checkStrictly: true,emitPath:false,expandTrigger:'hover' }" :options="menuTree" :show-all-levels="false" placeholder="請選擇父級字典" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="字典名稱：" :rules="rules.Required" prop="dictionaryName">
<el-input
v-model="form.dictionaryName"
autocomplete="off"
:show-word-limit="true"
placeholder="請輸入字典名稱"
/>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="title==='添加字典'">
<el-col :span="24">
<el-form-item label="字典編碼：" :rules="rules.Required" prop="dictionaryCode">
<el-input
v-model="form.dictionaryCode"
autocomplete="off"
:show-word-limit="true"
placeholder="請輸入字典編碼"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item
label="備注："
prop="remark"
>
<el-input
v-model="form.remark"
type="textarea"
maxlength="200"
:show-word-limit="true"
autocomplete="off"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getChildrens, getDictionaryInfo, EditDictionary } from '@/api/dictionary'
import rules from '@/utils/rules'
export default {
props: {
id: {
type: Number,
default: 0
},
title: {
type: String,
default: ''
}
},
data() {
return {
menuTree: [], // 字典樹
rules: rules,
formLabelWidth: '120px',
size: 'small',
loading: false,
form: {
id: this.id,
parentId: 0,
parentDictionaryName: '',
dictionaryCode: '',
dictionaryName: '',
remark: '',
deleteState: true
}
}
},
created() {
this.fetchInitData()
},
methods: {
handlePagedCallback() {
this.$emit('handlePagedCallback')
},
handleSubmitForm() {
this.$refs['menuEditForm'].validate((valid) => {
if (valid) {
this.loading = true
EditDictionary(this.form).then((res) => {
this.loading = false
if (res.code === 200) {
if (res.data) {
this.$message.success('操作成功')
this.handlePagedCallback()
} else {
this.$message.error('操作失敗')
}
} else {
this.$message.error(res.message)
}
})
}
})
},
handleResetForm() {
if (this.$refs['menuEditForm']) {
this.$refs['menuEditForm'].resetFields()
}
},
fetchInitData() {
getChildrens().then((res) => {
if (res.code === 200) {
this.menuTree = JSON.parse(JSON.stringify(res.data).replace(/id/g, 'value').replace(/dictionaryName/g, 'label'))
this.fetchFormData()
}
})
},
fetchFormData() {
this.handleResetForm()
if (this.id !== 0) {
const id = { Id: this.id }
getDictionaryInfo(id).then((res) => {
if (res.code === 200) {
this.form = Object.assign(this.form, res.data)
}
})
}
}
}
}
</script>2、主頁面 index.vue
<template>
<div class="app-container">
<div class="search-container">
<!-- 搜索項目 -->
<el-form :inline="true" :model="search" size="small">
<el-form-item>
<el-input v-model="search.keyword" placeholder="字典名稱" />
</el-form-item>
<el-form-item>
<el-button
v-rolebtn="'BTN-ZDGL-查詢'"
type="primary"
icon="el-icon-search"
@click="handleReloadPaged"
>查詢</el-button>
</el-form-item>
</el-form>
</div>
<div class="toolbar-container">
<!-- 按鈕組 -->
<el-button
v-rolebtn="'BTN-ZDGL-新增字典'"
type="success"
size="small"
plain
@click="AddDialog"
>新增</el-button>
<el-button
v-rolebtn="'BTN-ZDGL-編輯字典'"
type="primary"
size="small"
plain
@click="EditDialog"
>修改</el-button>
<el-button
v-rolebtn="'BTN-ZDGL-刪除字典'"
type="danger"
size="small"
plain
@click="handleDelete"
>刪除</el-button>
</div>
<el-table
ref="myTable"
:data="table.data"
:border="table.border"
style="width: 100%"
empty-text="暫無數(shù)據(jù)"
row-key="id"
lazy
:load="lazyload"
:default-expand-all="false"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="60" />
<el-table-column prop="dictionaryName" label="字典名稱" />
<el-table-column prop="dictionaryCode" label="字典編碼" />
<el-table-column prop="parentDictionaryName" label="父級字典名稱" />
<el-table-column prop="createTime" label="創(chuàng)建時間" />
<el-table-column prop="remark" label="備注" />
</el-table>
<Pagination
:total="pagination.total"
:current="pagination.index"
:page-size="pagination.size"
@handlePaginationChange="handlePaginationChange"
@handleSizeChange="handlePaginationChange"
/>
<div class="dialog-container">
<el-dialog
v-if="dialog.edit.visible"
ref="menuEditDialog"
:title="dialog.edit.title"
:visible.sync="dialog.edit.visible"
:width="dialog.edit.width"
:close-on-click-modal="dialog.close"
:close-on-press-escape="dialog.close"
>
<EditForm
:id="dialog.edit.id"
ref="Submit"
:title="dialog.edit.title"
@handlePagedCallback="handleEditCallback"
/>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.edit.visible = false">取 消</el-button>
<el-button type="primary" @click="Submit">確 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import EditForm from './EditForm'
import { getDictionaryNext, getDictionaryRoute, DeleteDictionaryRoute } from '@/api/dictionary'
export default {
components: { Pagination, EditForm },
data() {
return {
search: {
keyword: ''
},
searchId: 0,
// 表格數(shù)據(jù)
table: {
data: [],
selectRows: [],
border: false
},
currChildren: [],
// 分頁數(shù)據(jù)
pagination: {
index: 1,
size: 20,
total: 0
},
// 彈出層
dialog: {
close: false, // 是否關閉
edit: {
id: 0,
title: '修改字典', // 彈出層title
visible: false, // 彈出層是否顯示
width: '800px' // 彈出層寬度
}
},
layzNode: null,
layztreeNode: null,
layzresolve: null
}
},
created() {
this.getDictionaryList()
},
methods: {
lazyload(tree, treeNode, resolve) {
if (tree) {
var data = {
Id: tree.id
}
getDictionaryNext(data).then((res) => {
if (res.code === 200) {
this.layzNode = tree
this.layztreeNode = treeNode
this.layzresolve = resolve
resolve(res.data)
}
})
}
},
Submit() {
this.$refs.Submit.handleSubmitForm()
},
// 勾選
handleSelectionChange(selection) {
this.table.selectRows = selection
},
// 新增
AddDialog() {
this.dialog.edit.id = 0
this.dialog.edit.title = '添加字典'
this.dialog.edit.visible = true
},
// 修改
EditDialog() {
if (this.table.selectRows.length !== 1) {
this.$message.warning('請選擇要修改的字典')
} else {
this.dialog.edit.id = this.table.selectRows[0].id
this.dialog.edit.title = '修改字典'
this.dialog.edit.visible = true
}
},
// 修改成功回調(diào)
handleEditCallback() {
this.dialog.edit.visible = false
this.dialog.edit.id = 0
this.$nextTick(() => {
this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, this.layzNode.id, [])
this.lazyload(this.layzNode, this.layztreeNode, this.layzresolve)
this.getDictionaryList()
})
},
// 刪除
handleDelete() {
if (this.table.selectRows.length === 0) {
this.$message.warning('未勾選記錄')
return
}
const ids = []
this.table.selectRows.forEach((it) => {
ids.push(it.id)
})
this.$confirm('此操作將永久刪除勾選記錄, 是否繼續(xù)?').then(() => {
DeleteDictionaryRoute(ids).then((res) => {
if (res.code === 200) {
if (res.data) {
this.$nextTick(() => {
this.getDictionaryList()
this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, this.layzNode.id, [])
this.lazyload(this.layzNode, this.layztreeNode, this.layzresolve)
})
this.$message.success('操作成功')
} else {
this.$message.error('操作失敗')
}
} else {
this.$message.error(res.message)
}
})
})
},
// 列表接口
getDictionaryList() {
var data = {
searchName: this.search.keyword,
searchId: this.searchId,
pageIndex: this.pagination.index,
pageSize: this.pagination.size
}
getDictionaryRoute(data).then((res) => {
if (res.code === 200) {
this.pagination.total = res.data.total
this.table.data = res.data.data
}
})
},
// 重載表格
handleReloadPaged() {
this.pagination.index = 1
this.getDictionaryList()
},
// 分頁變更
handlePaginationChange(data) {
this.pagination.index = data.current
this.pagination.size = data.pageSize
this.getDictionaryList()
}
}
}
</script>
希望我的愚見能夠幫助你哦~，若有不足之處，還望指出，你們有更好的解決方法，歡迎大家在評論區(qū)下方留言支持，大家一起相互學習參考呀~
到此這篇關于vue3 實現(xiàn)關于 el-table 表格組件的封裝以及調(diào)用的文章就介紹到這了,更多相關vue3 el-table 表格組件封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Antd下拉選擇,自動匹配功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue-loader 是 Webpack 的加載模塊，它使我們可以用 Vue 文件格式編寫單文件組件。這篇文章主要介紹了Vue.js的高級面試題以及答案,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue3中使用swiper及遇到的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本文介紹了Vue.js在SEO優(yōu)化方面的挑戰(zhàn),并提供了一些方法來解決這些問題,包括使用服務器端渲染、預渲染和使用VueRouter的History模式來生成靜態(tài)HTML頁面,以及添加meta信息和內(nèi)部鏈接來提高搜索引擎的索引和排名2025-02-02
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關于vue3.0+element表格獲取每行數(shù)據(jù)的相關資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了vue組件學習教程，根據(jù)Vue官方文檔學習的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
vue項目input標簽checkbox,change和click綁定事件的區(qū)別說明
這篇文章主要介紹了vue項目input標簽checkbox,change和click綁定事件的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue 組件封裝 并使用 NPM 發(fā)布的教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue中的mescroll搜索運用及各種填坑處理，文中通過代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧2019-10-10
Vue3中Element-Plus分頁(Pagination)組件的使用
Element-Plus分頁(Pagination)組件在開發(fā)過程中數(shù)據(jù)展示會經(jīng)常使用到,同時分頁功能也會添加到頁面中,下面我們就來學習一下它的具體使用,需要的可以參考一下2023-11-11