Skip to content

V
vipSupplier
Commit 709b2154 by chuzhixin
Options

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

parent 6893e5a1
Showing with 70 additions and 100 deletions
src/views/personnelManagement/menuManagement/index.vue
......@@ -41,16 +41,16 @@
label="路径"
></el-table-column>
<el-table-column show-overflow-tooltip label="是否隐藏">
<template slot-scope="scope">
<template #default="{ row }">
<span>
{{ scope.row.hidden ? "是" : "否" }}
{{ row.hidden ? "是" : "否" }}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="是否一直显示当前节点">
<template slot-scope="scope">
<template #default="{ row }">
<span>
{{ scope.row.alwaysShow ? "是" : "否" }}
{{ row.alwaysShow ? "是" : "否" }}
</span>
</template>
</el-table-column>
......@@ -70,49 +70,40 @@
label="标题"
></el-table-column>
<el-table-column show-overflow-tooltip label="图标">
<template slot-scope="scope">
<span v-if="scope.row.meta">
<template #default="{ row }">
<span v-if="row.meta">
<vab-icon
v-if="scope.row.meta.icon"
:icon="['fas', scope.row.meta.icon]"
v-if="row.meta.icon"
:icon="['fas', row.meta.icon]"
></vab-icon>
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="是否固定">
<template slot-scope="scope">
<span v-if="scope.row.meta">
{{ scope.row.meta.affix ? "是" : "否" }}
<template #default="{ row }">
<span v-if="row.meta">
{{ row.meta.affix ? "是" : "否" }}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="是否无缓存">
<template slot-scope="scope">
<span v-if="scope.row.meta">
{{ scope.row.meta.noKeepAlive ? "是" : "否" }}
<template #default="{ row }">
<span v-if="row.meta">
{{ row.meta.noKeepAlive ? "是" : "否" }}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="badge">
<template slot-scope="scope">
<span v-if="scope.row.meta">
{{ scope.row.meta.badge }}
<template #default="{ row }">
<span v-if="row.meta">
{{ row.meta.badge }}
</span>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
fixed="right"
label="操作"
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>
<el-table-column show-overflow-tooltip label="操作" width="200">
<template #default="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
......
src/views/personnelManagement/roleManagement/index.vue
......@@ -47,17 +47,10 @@
prop="permission"
label="权限码"
></el-table-column>
<el-table-column
show-overflow-tooltip
fixed="right"
label="操作"
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>
<el-table-column show-overflow-tooltip label="操作" width="200">
<template #default="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
......
src/views/personnelManagement/userManagement/index.vue
......@@ -63,17 +63,10 @@
prop="datatime"
label="修改时间"
></el-table-column>
<el-table-column
show-overflow-tooltip
fixed="right"
label="操作"
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>
<el-table-column show-overflow-tooltip label="操作" width="200">
<template #default="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
......
src/views/vab/codeGenerator/components/TableExhibitionBody.vue
......@@ -9,7 +9,7 @@
:label="header.label"
align="center"
>
<template slot-scope="{ row }">
<template #default="{ row }">
{{ row[header.key] }}
</template>
</el-table-column>
......
src/views/vab/codeGenerator/components/snippetTable.js
......@@ -46,13 +46,13 @@ export const genTableSnippet = (headers = "getList") => {
>
<el-table-column show-overflow-tooltip type="selection"></el-table-column>
${genTableColumnSnippet(headers)}
<el-table-column show-overflow-tooltip fixed="right" label="操作" width="200">
<template v-slot="scope">
<el-button type="text" @click="editList(scope.row)"
<el-table-column show-overflow-tooltip label="操作" width="200">
<template #default="{row}">
<el-button type="text" @click="editList(row)"
>编辑
</el-button
>
<el-button type="text" @click="tableDelete(scope.row)"
<el-button type="text" @click="tableDelete(row)"
>删除
</el-button
>
......
src/views/vab/codeGenerator/components/snippetTableColumn.js
......@@ -18,7 +18,7 @@ const genTabeleColumnSinppetTemplate = (key, label) => {
val = `row.${key}`;
}
return `<el-table-column show-overflow-tooltip label="${label}">
<template v-slot={row}>
<template #default={row}>
{{ ${val} }}
</template>
</el-table-column>`;
......
src/views/vab/permissions/index.vue
......@@ -77,33 +77,33 @@
label="标题"
></el-table-column>
<el-table-column show-overflow-tooltip label="图标">
<template slot-scope="scope">
<span v-if="scope.row.meta">
<template #default="{ row }">
<span v-if="row.meta">
<vab-icon
v-if="scope.row.meta.icon"
:icon="['fas', scope.row.meta.icon]"
v-if="row.meta.icon"
:icon="['fas', row.meta.icon]"
></vab-icon>
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="是否固定">
<template slot-scope="scope">
<span v-if="scope.row.meta">
{{ scope.row.meta.affix }}
<template #default="{ row }">
<span v-if="row.meta">
{{ row.meta.affix }}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="是否无缓存">
<template slot-scope="scope">
<span v-if="scope.row.meta">
{{ scope.row.meta.noKeepAlive }}
<template #default="{ row }">
<span v-if="row.meta">
{{ row.meta.noKeepAlive }}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="badge">
<template slot-scope="scope">
<span v-if="scope.row.meta">
{{ scope.row.meta.badge }}
<template #default="{ row }">
<span v-if="row.meta">
{{ row.meta.badge }}
</span>
</template>
</el-table-column>
......
src/views/vab/table/index.vue
......@@ -51,7 +51,7 @@
width="55"
></el-table-column>
<el-table-column show-overflow-tooltip label="序号" width="95">
<template slot-scope="scope">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
......@@ -66,11 +66,11 @@
prop="author"
></el-table-column>
<el-table-column show-overflow-tooltip label="头像">
<template slot-scope="scope">
<template #default="{ row }">
<el-image
v-if="imgShow"
:preview-src-list="imageList"
:src="scope.row.img"
:src="row.img"
></el-image>
</template>
</el-table-column>
......@@ -81,15 +81,15 @@
sortable
></el-table-column>
<el-table-column show-overflow-tooltip label="状态">
<template slot-scope="scope">
<template #default="{ row }">
<el-tooltip
:content="scope.row.status"
:content="row.status"
class="item"
effect="dark"
placement="top-start"
>
<el-tag :type="scope.row.status | statusFilter">
{{ scope.row.status }}
<el-tag :type="row.status | statusFilter">
{{ row.status }}
</el-tag>
</el-tooltip>
</template>
......@@ -100,17 +100,10 @@
prop="datetime"
width="200"
></el-table-column>
<el-table-column
show-overflow-tooltip
label="操作"
width="180px"
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>
<el-table-column show-overflow-tooltip label="操作" width="180px">
<template #default="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
......
src/views/vab/table/inlineEditTable.vue
......@@ -11,12 +11,12 @@
width="55"
></el-table-column>
<el-table-column show-overflow-tooltip label="序号" width="95">
<template slot-scope="scope">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip min-width="300px" label="标题">
<template slot-scope="{ row }">
<template #default="{ row }">
<template v-if="row.edit">
<el-input v-model="row.title" style="width: 300px" />
<el-button
......@@ -41,7 +41,7 @@
label="操作"
width="200"
>
<template slot-scope="{ row }">
<template #default="{ row }">
<el-button
v-if="row.edit"
type="success"
......
src/views/vab/tree/index.vue
......@@ -21,7 +21,7 @@
@node-collapse="nodeCollapse"
@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">
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
{{ node.label }}
......@@ -51,7 +51,7 @@
<i class="el-icon-delete"></i>
</a>
</span>
</span>
</template>
</el-tree>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
......@@ -75,7 +75,7 @@
node-key="indexCode"
@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">
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
{{ node.label }}
......@@ -99,7 +99,7 @@
<i class="el-icon-delete"></i>
</a>
</span>
</span>
</template>
</el-tree>
</div>
<div v-show="!isShow" class="el-tree-wrap">
......@@ -115,7 +115,7 @@
node-key="indexCode"
@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">
<i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
{{ node.label }}
......@@ -133,7 +133,7 @@
<i class="el-icon-delete"></i>
</a>
</span>
</span>
</template>
</el-tree>
</div>
</el-col>
......@@ -160,9 +160,9 @@
node-key="id"
@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>
</template>
</el-tree>
</el-option>
</el-select>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment