chore: update the latest version of element-plus

This commit is contained in:
xiaoxian521
2022-05-27 17:21:18 +08:00
parent 870f064598
commit a53cbc2b87
14 changed files with 311 additions and 290 deletions

View File

@@ -56,7 +56,12 @@ function changeDirection(val) {
<template #header>
<div class="card-header">
<span>无缝滚动示例</span>
<el-button class="button" type="text" @click="changeDirection('top')">
<el-button
class="button"
link
type="primary"
@click="changeDirection('top')"
>
<span
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
>
@@ -65,7 +70,8 @@ function changeDirection(val) {
</el-button>
<el-button
class="button"
type="text"
link
type="primary"
@click="changeDirection('bottom')"
>
<span
@@ -78,7 +84,8 @@ function changeDirection(val) {
</el-button>
<el-button
class="button"
type="text"
link
type="primary"
@click="changeDirection('left')"
>
<span
@@ -89,7 +96,8 @@ function changeDirection(val) {
</el-button>
<el-button
class="button"
type="text"
link
type="primary"
@click="changeDirection('right')"
>
<span

View File

@@ -143,7 +143,7 @@ function onBack() {
<Motion :delay="300">
<el-form-item>
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
<el-button type="text"> 隐私政策 </el-button>
<el-button link type="primary"> 隐私政策 </el-button>
</el-form-item>
</Motion>

View File

@@ -134,7 +134,8 @@ watch(imgCode, value => {
<div class="w-full h-20px flex justify-between items-center">
<el-checkbox v-model="checked">记住密码</el-checkbox>
<el-button
type="text"
link
type="primary"
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
>
忘记密码?

View File

@@ -161,7 +161,8 @@ onMounted(() => {
<template #default="scope">
<el-button
class="reset-margin"
type="text"
link
type="primary"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('edits')"
@@ -172,7 +173,8 @@ onMounted(() => {
<template #reference>
<el-button
class="reset-margin"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('delete')"
@click="handleDelete(scope.row)"

View File

@@ -1,13 +1,14 @@
<script setup lang="ts">
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import { VxeTableEvents } from "vxe-table";
import { templateRef } from "@vueuse/core";
import { ref, reactive } from "vue";
import { type Direction } from "element-plus";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
interface Props {
drawer: boolean;
drawTitle?: string;
direction?: string;
direction?: Direction;
}
withDefaults(defineProps<Props>(), {
@@ -22,7 +23,7 @@ const emit = defineEmits<{
const { t } = useI18n();
const xTable = templateRef<any>("xTable", null);
const xTable = ref({} as VxeTableInstance);
const configData = reactive({
tableData: [
@@ -72,7 +73,7 @@ const changeAllEvent = () => {
const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
const $table = xTable.value;
configData.isAllChecked = $table.isAllCheckboxChecked();
configData.isIndeterminate = $table.isCheckboxIndeterminate();
configData.isIndeterminate = $table.isAllCheckboxIndeterminate();
configData.selectRecords = records;
};
</script>
@@ -85,11 +86,11 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
:direction="direction"
:before-close="handleClose"
destroy-on-close
size="640px"
size="680px"
>
<el-divider />
<!-- 列表 -->
<div class="list">
<div class="p-2">
<vxe-table
ref="xTable"
border
@@ -102,20 +103,22 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
<vxe-table-column field="dataval" title="数据值" />
<vxe-table-column title="操作" fixed="right">
<template #default="{ row }">
<vxe-button
type="text"
icon="fa fa-pencil-square-o"
<el-button
link
type="primary"
:icon="useRenderIcon('edits')"
@click="editConfig(row)"
>
编辑
</vxe-button>
<vxe-button
type="text"
icon="fa fa-trash-o"
</el-button>
<el-button
link
type="primary"
:icon="useRenderIcon('delete')"
@click="delConfig(row)"
>
删除
</vxe-button>
</el-button>
</template>
</vxe-table-column>
</vxe-table>
@@ -136,16 +139,16 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
]"
>
<template #left>
<span class="page-left">
<span class="absolute left-3 flex items-center">
<vxe-checkbox
v-model="configData.isAllChecked"
:indeterminate="configData.isIndeterminate"
@change="changeAllEvent"
/>
<span class="select-count">
已选中{{ configData.selectRecords.length }}
</span>
<vxe-button size="small">{{ t("buttons.hsdelete") }}</vxe-button>
<p>已选中{{ configData.selectRecords.length }}</p>
<el-button link type="danger" class="ml-1">
{{ t("buttons.hsdelete") }}
</el-button>
</span>
</template>
</vxe-pager>
@@ -155,22 +158,6 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
</template>
<style lang="scss" scoped>
.list {
padding: 10px;
.page-left {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
}
:deep(.select-count) {
margin-right: 5px;
}
:deep(.el-drawer__header) {
margin-bottom: 0;
}

View File

@@ -3,15 +3,18 @@ import XEUtils from "xe-utils";
import Config from "./config.vue";
import { useI18n } from "vue-i18n";
import { cloneDeep } from "lodash-unified";
import { templateRef } from "@vueuse/core";
import { reactive, ref, unref, nextTick } from "vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
import {
VXETable,
VxeTableInstance,
VxeTableEvents,
VxeFormPropTypes
type TablePublicMethods,
type VxeTableInstance,
type VxeFormPropTypes,
type VxeTableEvents,
type FormMethods
} from "vxe-table";
type onEditNRow = {
name: string;
model: string;
@@ -91,7 +94,8 @@ const dictData = reactive({
let originData = cloneDeep(dictData.tableData);
const xTree = templateRef<HTMLElement | any>("xTree", null);
const xTree = ref<TablePublicMethods>();
const xForm = ref<FormMethods>();
const handleSearch = () => {
const filterName = XEUtils.toValueString(dictData.filterName).trim();
@@ -201,6 +205,18 @@ function onDeploy(value?: object) {
function handleClose() {
drawer.value = false;
}
function onExpand() {
xTree.value.setAllTreeExpand(true);
}
function onUnExpand() {
xTree.value.clearTreeExpand();
}
function onHide() {
xForm.value.reset();
}
</script>
<template>
@@ -215,23 +231,29 @@ function handleClose() {
/>
</template>
<template #tools>
<vxe-button icon="fa fa-plus-square-o" status="primary" @click="onAdd">
{{ t("buttons.hsadd") }}
</vxe-button>
<vxe-button
icon="fa fa-folder-open-o"
status="primary"
@click="$refs.xTree.setAllTreeExpand(true)"
>
{{ t("buttons.hsexpendAll") }}
</vxe-button>
<vxe-button
icon="fa fa-folder-o"
status="primary"
@click="$refs.xTree.clearTreeExpand()"
>
{{ t("buttons.hscollapseAll") }}
</vxe-button>
<el-button-group>
<el-button
type="primary"
:icon="useRenderIcon('fa:plus-square-o', { online: true })"
@click="onAdd"
>
{{ t("buttons.hsadd") }}
</el-button>
<el-button
type="primary"
:icon="useRenderIcon('fa:folder-open-o', { online: true })"
@click="onExpand"
>
{{ t("buttons.hsexpendAll") }}
</el-button>
<el-button
type="primary"
:icon="useRenderIcon('fa:folder-o', { online: true })"
@click="onUnExpand"
>
{{ t("buttons.hscollapseAll") }}
</el-button>
</el-button-group>
</template>
</vxe-toolbar>
@@ -262,31 +284,39 @@ function handleClose() {
</vxe-table-column>
<vxe-table-column title="操作" width="330" fixed="right">
<template #default="{ row }">
<vxe-button
type="text"
icon="fa fa-pencil-square-o"
<el-button
link
type="primary"
:icon="useRenderIcon('edits')"
@click="onEdit(row)"
>
编辑
</vxe-button>
<vxe-button
type="text"
icon="fa fa-plus-square-o"
</el-button>
<el-button
link
type="primary"
:icon="useRenderIcon('fa:plus-square-o', { online: true })"
@click="onAddChild(row)"
>
新增子类型
</vxe-button>
<vxe-button
</el-button>
<el-button
v-show="row.model"
type="text"
icon="fa fa-cog"
link
type="primary"
:icon="useRenderIcon('fa:cog', { online: true })"
@click="onDeploy(row)"
>
字典配置
</vxe-button>
<vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent">
</el-button>
<el-button
link
type="primary"
:icon="useRenderIcon('delete')"
@click="confirmEvent"
>
删除
</vxe-button>
</el-button>
</template>
</vxe-table-column>
</vxe-table>
@@ -298,7 +328,7 @@ function handleClose() {
v-model="dictData.showEdit"
:title="dictData.selectRow ? '编辑' : '新增'"
:loading="dictData.submitLoading"
@hide="$refs.xForm.reset()"
@hide="onHide"
>
<template #default>
<vxe-form

View File

@@ -228,7 +228,8 @@ onMounted(() => {
<template #default="scope">
<el-button
class="reset-margin"
type="text"
link
type="primary"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('edits')"
@@ -239,7 +240,8 @@ onMounted(() => {
<template #reference>
<el-button
class="reset-margin"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('delete')"
@click="handleDelete(scope.row)"
@@ -251,7 +253,8 @@ onMounted(() => {
<el-dropdown>
<el-button
class="ml-3"
type="text"
link
type="primary"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('more')"
@@ -261,7 +264,8 @@ onMounted(() => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('menu')"
>
@@ -271,7 +275,8 @@ onMounted(() => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('database')"
>

View File

@@ -252,7 +252,8 @@ onMounted(() => {
<template #default="scope">
<el-button
class="reset-margin"
type="text"
link
type="primary"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('edits')"
@@ -263,7 +264,8 @@ onMounted(() => {
<template #reference>
<el-button
class="reset-margin"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('delete')"
@click="handleDelete(scope.row)"
@@ -275,7 +277,8 @@ onMounted(() => {
<el-dropdown>
<el-button
class="ml-3"
type="text"
link
type="primary"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('more')"
@@ -285,7 +288,8 @@ onMounted(() => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('password')"
>
@@ -295,7 +299,8 @@ onMounted(() => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:size="size"
:icon="useRenderIcon('role')"
>

View File

@@ -102,7 +102,8 @@ onMounted(async () => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:icon="useRenderIcon('expand')"
@click="toggleRowExpansionAll(true)"
>
@@ -112,7 +113,8 @@ onMounted(async () => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:icon="useRenderIcon('unExpand')"
@click="toggleRowExpansionAll(false)"
>
@@ -122,7 +124,8 @@ onMounted(async () => {
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
link
type="primary"
:icon="useRenderIcon('reset')"
@click="onReset"
>