1.效果圖
2.html
<el-select
? ? ? v-model="state.users"
? ? ? value-key="value"
? ? ? placeholder="請選擇"
? ? ? multiple
????collapse-tags
? ? ? collapse-tags-tooltip
? ? ? style="width: 240px"
? ? ? @visible-change="visibleChange"
? ? ? @remove-tag="removeTag">
? ? ? <el-option class="option" value="" />
? ? ? <el-tree
? ? ? ? class="admins-tree"
? ? ? ? :data="state.userList"
? ? ? ? ref="menuTree"
? ? ? ? :props="{
? ? ? ? ? value: 'departmentId',
? ? ? ? ? label: 'departmentName',
? ? ? ? ? children: 'child'
? ? ? ? }"
? ? ? ? node-key="departmentId"
? ? ? ? default-expand-all
? ? ? ? :expand-on-click-node="false">
? ? ? ? <template #default="{ data }">
? ? ? ? ? <div class="custom-tree-node">
? ? ? ? ? ? <div style="line-height: 30px">
? ? ? ? ? ? ? <el-icon class="icon mr5">
? ? ? ? ? ? ? ? <ele-Folder />
? ? ? ? ? ? ? </el-icon>
? ? ? ? ? ? ? <span @click="userClickcChild(data, 2)">{{ data.departmentName }}</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="tree-div" v-show="data.userList?.length">
? ? ? ? ? ? ? <span
? ? ? ? ? ? ? ? class="texts"
? ? ? ? ? ? ? ? v-for="(item, index) in data.userList"
? ? ? ? ? ? ? ? :key="index"
? ? ? ? ? ? ? ? @click="userClickcChild(item, 1)"
? ? ? ? ? ? ? ? >{{ item.name }}</span
? ? ? ? ? ? ? >
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </template>
? ? ? </el-tree>
? ? </el-select>
2.js
const props = defineProps({
? // 0-部門/成員，1-成員
? isType: {
? ? type: Number,
? ? required: true,
? ? default: () => 0
? },
? // 是否多選 0-否，1-是
? isMany: {
? ? type: Number,
? ? required: true,
? ? default: () => 0
? },
? users: {
? ? type: Array as PropType<sadas[]>,
? ? required: true,
? ? default: () => []
? },
});
// 監(jiān)聽數(shù)組初始化格式
watch(() => props.users, () => {
? state.users = props.users.map((item: any) => {
? ? return {
? ? ? type: item.userId ? 1 : 2,
? ? ? value: item.userId ? item.userId : item.departmentId,
? ? ? label: item.name ? item.name : item.departmentName
? ? }
? })
},{deep: true});
//
const visibleChange = async (val: boolean) => {
? // console.log(val);
? if (val) {
? ? let res = await promotionApis.getDataListAndUser();
? ? // console.log(res.data);
? ? state.userList = res.data;
? }
};
// 成員點擊
const emit = defineEmits(['update:users'])
// type: 1-人，2-部門
const userClickcChild = (rows: any, type: number) => {
? // console.log(rows)
? let status = {} as any
? if( type == 1 ) {
? ? status = props.users.find(( items: any ) => items.value == rows.userId)
? }
? if( type == 2 && props.isType != 1 ) {
? ? status = props.users.find(( items: any ) => items.value == rows.departmentId)
? }
? if( !status ) {
? ? if( props.isMany ) {
? ? ? state.users.push({
? ? ? ? type: type,
? ? ? ? value: rows.userId ? rows.userId : rows.departmentId,
? ? ? ? label: rows.userId ? rows.name : rows.departmentName
? ? ? })
? ? } else {
? ? ? state.users = [{
? ? ? ? type: type,
? ? ? ? value: rows.userId ? rows.userId : rows.departmentId,
? ? ? ? label: rows.userId ? rows.name : rows.departmentName
? ? ? }]
? ? }
? }
}
// 刪除標簽
const removeTag = (e: any) => {
? state.users.filter((item: any) => item.value == e.value)
}
