52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<!-- 列表选择器示例 -->
|
|
<script setup lang="ts">
|
|
import selectConfig from "./config/select";
|
|
|
|
interface IUser {
|
|
id: number;
|
|
username: string;
|
|
nickname: string;
|
|
mobile: string;
|
|
genderLabel: string;
|
|
avatar: string;
|
|
email: string | null;
|
|
status: number;
|
|
deptName: string;
|
|
roleNames: string;
|
|
createTime: string;
|
|
}
|
|
const selectedUser = ref<IUser>();
|
|
function handleConfirm(data: IUser[]) {
|
|
selectedUser.value = data[0];
|
|
}
|
|
const text = computed(() => {
|
|
return selectedUser.value
|
|
? `${selectedUser.value.username} - ${selectedUser.value.genderLabel} - ${selectedUser.value.deptName}`
|
|
: "";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<el-link
|
|
href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
|
|
type="primary"
|
|
target="_blank"
|
|
class="mb-10"
|
|
>
|
|
示例源码 请点击>>>>
|
|
</el-link>
|
|
<table-select
|
|
:text="text"
|
|
:select-config="selectConfig"
|
|
@confirm-click="handleConfirm"
|
|
>
|
|
<template #status="scope">
|
|
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
|
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
|
</el-tag>
|
|
</template>
|
|
</table-select>
|
|
</div>
|
|
</template>
|