JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-09-16 09:39:45 +08:00
Code Issues Projects Releases Wiki Activity

⚡️精简表格代码，优化表格组件手机端显示，开源版彻底完成手机、平板、电脑三端适配

Browse Source
This commit is contained in:
chuzhixin 2020-10-01 11:06:22 +08:00
parent 6893e5a152
commit 709b215413
10 changed files with 70 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/views/personnelManagement/menuManagement/index.vue
View File

@ -41,16 +41,16 @@
label="路径" label="路径"
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="是否隐藏"> <el-table-column show-overflow-tooltip label="是否隐藏">
<template slot-scope="scope"> <template #default="{ row }">
<span> <span>
{{ scope.row.hidden ? "是" : "否" }} {{ row.hidden ? "是" : "否" }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="是否一直显示当前节点"> <el-table-column show-overflow-tooltip label="是否一直显示当前节点">
<template slot-scope="scope"> <template #default="{ row }">
<span> <span>
{{ scope.row.alwaysShow ? "是" : "否" }} {{ row.alwaysShow ? "是" : "否" }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
@ -70,49 +70,40 @@
label="标题" label="标题"
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="图标"> <el-table-column show-overflow-tooltip label="图标">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
<vab-icon <vab-icon
v-if="scope.row.meta.icon" v-if="row.meta.icon"
:icon="['fas', scope.row.meta.icon]" :icon="['fas', row.meta.icon]"
></vab-icon> ></vab-icon>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="是否固定"> <el-table-column show-overflow-tooltip label="是否固定">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
{{ scope.row.meta.affix ? "是" : "否" }} {{ row.meta.affix ? "是" : "否" }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="是否无缓存"> <el-table-column show-overflow-tooltip label="是否无缓存">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
{{ scope.row.meta.noKeepAlive ? "是" : "否" }} {{ row.meta.noKeepAlive ? "是" : "否" }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="badge"> <el-table-column show-overflow-tooltip label="badge">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
{{ scope.row.meta.badge }} {{ row.meta.badge }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column show-overflow-tooltip label="操作" width="200">
show-overflow-tooltip <template #default="{ row }">
fixed="right" <el-button type="text" @click="handleEdit(row)">编辑</el-button>
label="操作" <el-button type="text" @click="handleDelete(row)">删除</el-button>
width="200"
>
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">
编辑
</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

15
src/views/personnelManagement/roleManagement/index.vue
View File

@ -47,17 +47,10 @@
prop="permission" prop="permission"
label="权限码" label="权限码"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column show-overflow-tooltip label="操作" width="200">
show-overflow-tooltip <template #default="{ row }">
fixed="right" <el-button type="text" @click="handleEdit(row)">编辑</el-button>
label="操作" <el-button type="text" @click="handleDelete(row)">删除</el-button>
width="200"
>
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

15
src/views/personnelManagement/userManagement/index.vue
View File

@ -63,17 +63,10 @@
prop="datatime" prop="datatime"
label="修改时间" label="修改时间"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column show-overflow-tooltip label="操作" width="200">
show-overflow-tooltip <template #default="{ row }">
fixed="right" <el-button type="text" @click="handleEdit(row)">编辑</el-button>
label="操作" <el-button type="text" @click="handleDelete(row)">删除</el-button>
width="200"
>
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

2
src/views/vab/codeGenerator/components/TableExhibitionBody.vue
View File

@ -9,7 +9,7 @@
:label="header.label" :label="header.label"
align="center" align="center"
> >
<template slot-scope="{ row }"> <template #default="{ row }">
{{ row[header.key] }} {{ row[header.key] }}
</template> </template>
</el-table-column> </el-table-column>

8
src/views/vab/codeGenerator/components/snippetTable.js
View File

@ -46,13 +46,13 @@ export const genTableSnippet = (headers = "getList") => {
> >
<el-table-column show-overflow-tooltip type="selection"></el-table-column> <el-table-column show-overflow-tooltip type="selection"></el-table-column>
${genTableColumnSnippet(headers)} ${genTableColumnSnippet(headers)}
<el-table-column show-overflow-tooltip fixed="right" label="操作" width="200"> <el-table-column show-overflow-tooltip label="操作" width="200">
<template v-slot="scope"> <template #default="{row}">
<el-button type="text" @click="editList(scope.row)" <el-button type="text" @click="editList(row)"
>编辑 >编辑
</el-button </el-button
> >
<el-button type="text" @click="tableDelete(scope.row)" <el-button type="text" @click="tableDelete(row)"
>删除 >删除
</el-button </el-button
> >

2
src/views/vab/codeGenerator/components/snippetTableColumn.js
View File

@ -18,7 +18,7 @@ const genTabeleColumnSinppetTemplate = (key, label) => {
val = `row.${key}`; val = `row.${key}`;
} }
return `<el-table-column show-overflow-tooltip label="${label}"> return `<el-table-column show-overflow-tooltip label="${label}">
<template v-slot={row}> <template #default={row}>
{{ ${val} }} {{ ${val} }}
</template> </template>
</el-table-column>`; </el-table-column>`;

26
src/views/vab/permissions/index.vue
View File

@ -77,33 +77,33 @@
label="标题" label="标题"
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="图标"> <el-table-column show-overflow-tooltip label="图标">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
<vab-icon <vab-icon
v-if="scope.row.meta.icon" v-if="row.meta.icon"
:icon="['fas', scope.row.meta.icon]" :icon="['fas', row.meta.icon]"
></vab-icon> ></vab-icon>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="是否固定"> <el-table-column show-overflow-tooltip label="是否固定">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
{{ scope.row.meta.affix }} {{ row.meta.affix }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="是否无缓存"> <el-table-column show-overflow-tooltip label="是否无缓存">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
{{ scope.row.meta.noKeepAlive }} {{ row.meta.noKeepAlive }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="badge"> <el-table-column show-overflow-tooltip label="badge">
<template slot-scope="scope"> <template #default="{ row }">
<span v-if="scope.row.meta"> <span v-if="row.meta">
{{ scope.row.meta.badge }} {{ row.meta.badge }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>

29
src/views/vab/table/index.vue
View File

@ -51,7 +51,7 @@
width="55" width="55"
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="序号" width="95"> <el-table-column show-overflow-tooltip label="序号" width="95">
<template slot-scope="scope"> <template #default="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
@ -66,11 +66,11 @@
prop="author" prop="author"
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="头像"> <el-table-column show-overflow-tooltip label="头像">
<template slot-scope="scope"> <template #default="{ row }">
<el-image <el-image
v-if="imgShow" v-if="imgShow"
:preview-src-list="imageList" :preview-src-list="imageList"
:src="scope.row.img" :src="row.img"
></el-image> ></el-image>
</template> </template>
</el-table-column> </el-table-column>
@ -81,15 +81,15 @@
sortable sortable
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="状态"> <el-table-column show-overflow-tooltip label="状态">
<template slot-scope="scope"> <template #default="{ row }">
<el-tooltip <el-tooltip
:content="scope.row.status" :content="row.status"
class="item" class="item"
effect="dark" effect="dark"
placement="top-start" placement="top-start"
> >
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</el-tooltip> </el-tooltip>
</template> </template>
@ -100,17 +100,10 @@
prop="datetime" prop="datetime"
width="200" width="200"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column show-overflow-tooltip label="操作" width="180px">
show-overflow-tooltip <template #default="{ row }">
label="操作" <el-button type="text" @click="handleEdit(row)">编辑</el-button>
width="180px" <el-button type="text" @click="handleDelete(row)">删除</el-button>
fixed="right"
>
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

6
src/views/vab/table/inlineEditTable.vue
View File

@ -11,12 +11,12 @@
width="55" width="55"
></el-table-column> ></el-table-column>
<el-table-column show-overflow-tooltip label="序号" width="95"> <el-table-column show-overflow-tooltip label="序号" width="95">
<template slot-scope="scope"> <template #default="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip min-width="300px" label="标题"> <el-table-column show-overflow-tooltip min-width="300px" label="标题">
<template slot-scope="{ row }"> <template #default="{ row }">
<template v-if="row.edit"> <template v-if="row.edit">
<el-input v-model="row.title" style="width: 300px" /> <el-input v-model="row.title" style="width: 300px" />
<el-button <el-button
@ -41,7 +41,7 @@
label="操作" label="操作"
width="200" width="200"
> >
<template slot-scope="{ row }"> <template #default="{ row }">
<el-button <el-button
v-if="row.edit" v-if="row.edit"
type="success" type="success"

16
src/views/vab/tree/index.vue
View File

@ -21,7 +21,7 @@
@node-collapse="nodeCollapse" @node-collapse="nodeCollapse"
@node-expand="nodeExpand" @node-expand="nodeExpand"
> >
<span slot-scope="{ node, data }" class="vab-custom-tree-node"> <template #defalut="{ node, data }" class="vab-custom-tree-node">
<span class="vab-tree-item"> <span class="vab-tree-item">
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i> <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
{{ node.label }} {{ node.label }}
@ -51,7 +51,7 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</a> </a>
</span> </span>
</span> </template>
</el-tree> </el-tree>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6"> <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
@ -75,7 +75,7 @@
node-key="indexCode" node-key="indexCode"
@node-click="nodeClick" @node-click="nodeClick"
> >
<span slot-scope="{ node }" class="vab-custom-tree-node"> <template #defalut="{ node }" class="vab-custom-tree-node">
<span class="vab-tree-item"> <span class="vab-tree-item">
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i> <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
{{ node.label }} {{ node.label }}
@ -99,7 +99,7 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</a> </a>
</span> </span>
</span> </template>
</el-tree> </el-tree>
</div> </div>
<div v-show="!isShow" class="el-tree-wrap"> <div v-show="!isShow" class="el-tree-wrap">
@ -115,7 +115,7 @@
node-key="indexCode" node-key="indexCode"
@node-click="nodeClick" @node-click="nodeClick"
> >
<span slot-scope="{ node }" class="vab-custom-tree-node"> <template #defalut="{ node }" class="vab-custom-tree-node">
<span class="vab-tree-item"> <span class="vab-tree-item">
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i> <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
{{ node.label }} {{ node.label }}
@ -133,7 +133,7 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</a> </a>
</span> </span>
</span> </template>
</el-tree> </el-tree>
</div> </div>
</el-col> </el-col>
@ -160,9 +160,9 @@
node-key="id" node-key="id"
@node-click="selectTreeNodeClick" @node-click="selectTreeNodeClick"
> >
<span slot-scope="{ node }" class="vab-custom-tree-node"> <template #defalut="{ node }" class="vab-custom-tree-node">
<span class="vab-tree-item">{{ node.label }}</span> <span class="vab-tree-item">{{ node.label }}</span>
</span> </template>
</el-tree> </el-tree>
</el-option> </el-option>
</el-select> </el-select>