vue用法汇总--包含各种控件（大部分是vue3）

1、导航功能

 <template #header>
        <div class="card-header">
          <el-icon><Watch /></el-icon>
          <span>实时排班信息</span>
        </div>
      </template>

　2、　日期

<el-form-item>
          <el-date-picker
            v-model="paramForm.rosteringDate"
            type="date"
            placeholder="请选择排班执行日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

3、下拉组织

  <base-escort-org-tree class="tree" style="width: 100%;" @getNode="getNodeData" ref="baseTree"
            :checkNode="paramForm.deptId" :getdisAbled="getdisAbled"  />
        </el-form-item>

<script setup lang='ts'>

import BaseEscortOrgTree from "@/views/basic/components/baseEscortOrgTree.vue

// 默认当前日期

import { getDay} from '@/utils/time'

// 查询排班信息接口请求参数类型

const paramForm = reactive({

  rosteringDate: getDay(),

  customerId:'',

  deptId:'',

  pageIndex:1,

  pageSize:20

})

// 选择数据

const getNodeData = (node: baseEscortOrgTableItem) => {

    if (node.parentId != "" && node.parentId != null) {

        paramForm.deptId= node.id

    }

}

// 可用不可用

const getdisAbled = (data: any) => {

    if (data.parentId == "" || data.parentId == null) {

        return true

    } else {

        return false

    }

}

</script>

　　（2）组件内容

<template>
    <el-tree-select
        v-model="props.checkNode"
        :data="data"
        check-strictly
        :render-after-expand="false"
        :default-expand-all="true"
        :props="defaultProps"
        node-key="id"
        :accordion="true"
        @node-click="getNode"
        placeholder="请选择所属组织机构"
    />
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue"
import { ElTree } from 'element-plus'
import { tableItem } from "@/api/basic/baseEscortOrg/type"
import { useCounterStore } from "@/store/modules/base"
import publicData from "../common/publicData"
const store = useCounterStore()

const props = defineProps({
    checkNode: {},
    getdisAbled: {},
}) 
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'orgName',
    disabled:props.getdisAbled
}
const data = ref<tableItem[]>(store.orgTreeData)

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const emit = defineEmits(['getNode'])
const getNode = (node:tableItem) => {
    emit('getNode', node)
}
onMounted(() => {
    if(data.value.length == 0){
        reFresh()
    }else{
        emit('getNode', data.value[0])
    }
})
//刷新左侧树
const reFresh = () => {
    store.setOrgTreeData(publicData.orgId).then(res => {
        data.value = res as any
        emit('getNode', data.value[0])
    })
}
defineExpose({
    reFresh
});

</script>
<style lang="scss" scoped>
.treeDiv {
    :deep(.filter-tree) {
        .el-tree-node__label {
            font-weight: 800;
        }

        .is-leaf+.el-tree-node__label {
            font-weight: 400;
        }

        .is-current {
            >.el-tree-node__content {
                background-image: linear-gradient(119deg, #324157, #409eff);
                color: #fff;
            }
        }

        .el-tree-node__content:hover {
            border-radius: 17px;
        }

        .el-tree-node.is-current>.el-tree-node__content {
            border-radius: 17px;
        }
    }
}
</style>