refactor(table): 更新表格组件模板语法和优化配置

- 将所有 slot-scope 语法替换为 v-slot 语法以符合 Vue 3 标准
- 移除 CuteDragTableDemo 和 CuteSimpleTableDemo 中的冗余 operateColumn 配置
- 修复 CuteVerticalScrollBarDemo 组件名称错误
- 更新组件演示页面中的组件引用和导入配置
- 移除系统管理模块中过时的属性定义
- 优化表格列的模板渲染方式,提升性能和可维护性
This commit is contained in:
2026-02-05 15:50:45 +08:00
parent 014e850cc3
commit 290e47911a
17 changed files with 36 additions and 73 deletions
@@ -33,7 +33,7 @@
<el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
<el-table-column prop="createBy" label="创建人" />
<el-table-column label="操作" width="150" min-width="150" fixed="right">
<template slot-scope="scope">
<template v-slot="scope">
<div>
<el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
<el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
@@ -92,22 +92,6 @@ export default {
{ prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
{ prop: 'createBy', label: '创建人' }
],
operateColumn: {
width: '150',
fixed: 'right',
formatter: (row, column, cellValue, index) => {
return (<div>
<el-button type='text' onClick={() => {
console.log('编辑')
}}>编辑
</el-button>
<el-button type='text' onClick={() => {
console.log('删除')
}}>删除
</el-button>
</div>)
}
},
pageProps: {
current: 1,
pageSize: 10,
@@ -33,7 +33,7 @@
<el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
<el-table-column prop="createBy" label="创建人" />
<el-table-column label="操作" width="150" min-width="150" fixed="right">
<template slot-scope="scope">
<template v-slot="scope">
<div>
<el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
<el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
@@ -92,22 +92,6 @@ export default {
{ prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
{ prop: 'createBy', label: '创建人' }
],
operateColumn: {
width: '150',
fixed: 'right',
formatter: (row, column, cellValue, index) => {
return (<div>
<el-button type='text' onClick={() => {
console.log('编辑')
}}>编辑
</el-button>
<el-button type='text' onClick={() => {
console.log('删除')
}}>删除
</el-button>
</div>)
}
},
pageProps: {
current: 1,
pageSize: 10,
@@ -24,7 +24,7 @@
import CuteVerticalScrollBar from '@/views/components/dev/CuteVerticalScrollBar.vue'
export default {
name: 'CuteHorizontalScrollBarDemo',
name: 'CuteVerticalScrollBarDemo',
components: { CuteVerticalScrollBar },
data() {
return {
@@ -25,7 +25,7 @@
<CuteHorizontalScrollBarDemo />
</el-collapse-item>
<el-collapse-item title="纵向滚动区域 CuteVerticalScrollBar" name="CuteVerticalScrollBar">
<CuteSectionTitleDemo />
<CuteVerticalScrollBarDemo />
</el-collapse-item>
<el-collapse-item title="一键复制 CuteOneKeyCopy" name="CuteOneKeyCopy">
<CuteOneKeyCopyDemo />
@@ -163,10 +163,12 @@ import CuteFormDrawerProDemo from '@/views/componentsDemo/advanced/CuteFormDrawe
import CuteSearchFormDemo from '@/views/componentsDemo/advanced/CuteSearchFormDemo.vue'
import CuteSearchFormProDemo from '@/views/componentsDemo/advanced/CuteSearchFormProDemo.vue'
import CuteSimpleTableDemo from '@/views/componentsDemo/advanced/CuteSimpleTableDemo.vue'
import CuteVerticalScrollBarDemo from '@/views/componentsDemo/dev/CuteVerticalScrollBarDemo.vue'
export default {
name: 'SystemComponents',
components: {
CuteVerticalScrollBarDemo,
CuteSimpleTableDemo,
CuteSearchFormProDemo,
CuteSearchFormDemo,
@@ -203,13 +205,6 @@ export default {
CuteButtonDemo,
CutePage
},
props: {
value: {
type: Object,
required: true,
default: null
}
},
data() {
return {
tabKey: 'basic'
@@ -94,7 +94,7 @@
<el-table-column label="名称" prop="name" />
<el-table-column label="排序" prop="deptSort" />
<el-table-column label="状态" align="center" prop="enabled">
<template slot-scope="scope">
<template v-slot="scope">
<el-switch
v-model="scope.row.enabled"
:disabled="scope.row.id === 1"
@@ -112,7 +112,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
:data="scope.row"
:permission="permission"
@@ -57,7 +57,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
:data="scope.row"
:permission="permission"
@@ -63,7 +63,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
:data="scope.row"
:permission="permission"
@@ -16,12 +16,12 @@
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="jobSort" label="排序">
<template slot-scope="scope">
<template v-slot="scope">
{{ scope.row.jobSort }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<template v-slot="scope">
<el-switch
v-model="scope.row.enabled"
active-color="#67C23A"
@@ -39,7 +39,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
:data="scope.row"
:permission="permission"
@@ -148,31 +148,31 @@
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="220px" prop="title" />
<el-table-column prop="icon" label="图标" align="center" width="60px">
<template slot-scope="scope">
<template v-slot="scope">
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
</template>
</el-table-column>
<el-table-column prop="menuSort" align="center" label="排序">
<template slot-scope="scope">
<template v-slot="scope">
{{ scope.row.menuSort }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
<el-table-column prop="iFrame" label="外链" width="75px">
<template slot-scope="scope">
<template v-slot="scope">
<span v-if="scope.row.iFrame">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column prop="cache" label="缓存" width="75px">
<template slot-scope="scope">
<template v-slot="scope">
<span v-if="scope.row.cache">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column prop="hidden" label="可见" width="75px">
<template slot-scope="scope">
<template v-slot="scope">
<span v-if="scope.row.hidden">否</span>
<span v-else>是</span>
</template>
@@ -185,7 +185,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
:data="scope.row"
:permission="permission"
@@ -46,7 +46,7 @@
<el-table-column prop="browser" label="浏览器" />
<el-table-column prop="loginTime" label="登录时间" />
<el-table-column label="操作" width="70px" fixed="right">
<template slot-scope="scope">
<template v-slot="scope">
<el-popover
:ref="scope.$index"
v-permission="['admin']"
@@ -102,7 +102,7 @@
<el-table-column :show-overflow-tooltip="true" prop="params" label="参数" />
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
<el-table-column :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
<template slot-scope="scope">
<template v-slot="scope">
<el-tag :type="scope.row.isPause ? 'warning' : 'success'">{{
scope.row.isPause ? '已暂停' : '运行中'
}}
@@ -118,7 +118,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<el-button
v-permission="['admin','quartzJob:edit']"
size="mini"
@@ -45,7 +45,7 @@
<el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数" />
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
<el-table-column prop="createTime" label="异常详情" width="110px">
<template slot-scope="scope">
<template v-slot="scope">
<el-button
v-show="scope.row.exceptionDetail"
size="mini"
@@ -57,7 +57,7 @@
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)" />
<el-table-column align="center" prop="isSuccess" width="80px" label="状态">
<template slot-scope="scope">
<template v-slot="scope">
<el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{
scope.row.isSuccess ? '成功' : '失败'
}}
@@ -87,7 +87,7 @@
<el-table-column prop="dataScope" label="数据权限" />
<el-table-column prop="level" label="角色级别" />
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述">
<template slot-scope="scope">
<template v-slot="scope">
{{ scope.row.description == null ? '-' : scope.row.description }}
</template>
</el-table-column>
@@ -99,7 +99,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
v-if="scope.row.level >= level"
:data="scope.row"
@@ -76,7 +76,7 @@
>
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="文件名">
<template slot-scope="scope">
<template v-slot="scope">
<el-popover
:content="'file/' + scope.row.dateGroup + '/' + scope.row.realName"
placement="top-start"
@@ -97,10 +97,10 @@
</template>
</el-table-column>
<el-table-column prop="path" label="预览图">
<template slot-scope="{row}">
<template v-slot="scope">
<el-image
:src=" baseApi + '/file/' + row.dateGroup + '/' + row.realName"
:preview-src-list="[baseApi + '/file/' + row.dateGroup + '/' + row.realName]"
:src=" baseApi + '/file/' + scope.row.dateGroup + '/' + scope.row.realName"
:preview-src-list="[baseApi + '/file/' + scope.row.dateGroup + '/' + scope.row.realName]"
fit="contain"
lazy
class="el-avatar"
@@ -81,7 +81,7 @@
<el-table-column prop="createBy" label="操作人" />
<el-table-column prop="createTime" label="创建日期" />
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<template v-slot="scope">
<el-button id="ossFileUrl" type="text" @click="handleCopyFileUrl(scope.row.fileUrl)">复制链接</el-button>
</template>
</el-table-column>
@@ -103,7 +103,7 @@
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
<el-table-column prop="browserInfo" label="浏览器" />
<el-table-column prop="executeTime" label="请求耗时" align="center">
<template slot-scope="scope">
<template v-slot="scope">
<el-tag v-if="scope.row.executeTime <= 300">{{ scope.row.time || 0 }}ms</el-tag>
<el-tag v-else-if="scope.row.executeTime <= 1000" type="warning">{{ scope.row.executeTime || 0 }}ms</el-tag>
<el-tag v-else type="danger">{{ scope.row.executeTime || 0 }}ms</el-tag>
@@ -118,7 +118,7 @@
style="margin-left: 40px"
/></div>
</template>
<template slot-scope="scope">
<template v-slot="scope">
<span>{{ scope.row.createTime }}</span>
</template>
</el-table-column>
@@ -154,12 +154,12 @@
<el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="手机号" />
<el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
<el-table-column :show-overflow-tooltip="true" prop="dept" label="部门">
<template slot-scope="scope">
<template v-slot="scope">
<div>{{ scope.row.dept.name }}</div>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="enabled">
<template slot-scope="scope">
<template v-slot="scope">
<el-switch
v-model="scope.row.enabled"
:disabled="user.id === scope.row.id"
@@ -177,7 +177,7 @@
align="center"
fixed="right"
>
<template slot-scope="scope">
<template v-slot="scope">
<udOperation
:data="scope.row"
:permission="permission"