<template>
? <div>
? ? <div class="select-table">
? ? ? <el-form ref="verification" label-width="80px" :model="selectData" :rules="rules">
? ? ? ? <el-form-item label="姓名" prop="userName">
? ? ? ? ? <el-input @change="changeTab" v-model="selectData.userName" placeholder="選擇用戶" :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'" @click.native="deptogglePanel($event)"></el-input>
? ? ? ? </el-form-item>
? ? ? </el-form>
? ? </div>
? ? <div v-if="showTree" class="treeDiv" ref="tableList">
? ? ? <div style="display: flex;align-items: center;margin-bottom: 10px">
? ? ? ? <span style="font-size: 14px;color: #606266;margin: 0 10px">姓名</span>
? ? ? ? <el-input style="width: 200px" clearable v-model="formData.userName" ?size="small" placeholder="請輸入姓名"></el-input>
? ? ? ? <span style="font-size: 14px;color: #606266;margin: 0 10px">職務</span>
? ? ? ? <el-input style="width: 200px" clearable v-model="formData.position" size="small" placeholder="請輸入職務"></el-input>
? ? ? ? <el-button style="margin-left: 10px" size="small" type="primary" plain @click="getTableData">查詢</el-button>
? ? ? </div>
? ? ? <el-table @row-click="handleRegionNodeClick" :data="tableData" border stripe ref="tableView" size="small" height='200px' highlight-current-row :header-cell-style="{background:'#ECF5FF',color:'#606266',fontWeight:'bold'}">
? ? ? ? <el-table-column prop="userName" label="姓名" header-align="center" show-overflow-tooltip></el-table-column>
? ? ? ? <el-table-column prop="position" label="職位" align="center"></el-table-column>
? ? ? ? <el-table-column prop="orgName" label="標段" align="center"></el-table-column>
? ? ? </el-table>
? ? ? <el-pagination
? ? ? ? ? style="width: calc(100% - 10px); bottom: 10px;background: rgb(236, 245, 255);"
? ? ? ? ? @size-change="dolNandleSizeChange"
? ? ? ? ? @current-change="dolHandleCurrentChange"
? ? ? ? ? :current-page="formData.page"
? ? ? ? ? :page-sizes="[15, 30, 50, 100]"
? ? ? ? ? :page-size="formData.rows"
? ? ? ? ? layout="total, sizes, prev, pager, next, jumper"
? ? ? ? ? :total="total">
? ? ? </el-pagination>
? ? </div>
? </div>
</template>

export default {
? name: "selectTable",
? data() {
? ? return {

? ? ? total: 0,
? ? ? //表單驗證
? ? ? rules: {
? ? ? ? userName: [{ required: true, message: "姓名不能為空", trigger: "blur" }]
? ? ? },
? ? ? tableData:[],
? ? ? formData:{
? ? ? ? userName:"",
? ? ? ? position:"",
? ? ? ? rows: 15,
? ? ? ? page: 1,
? ? ? },
? ? ? queryInfo:{},
? ? ? showTree: false,
? ? ? selectData:{
? ? ? ? userName:''
? ? ? }
? ? }
? },
? mounted() {
? ? this.getTableData()
? },
? methods: {
? ? // 獲取查詢數據
? ? getTableData() {
? ? ? this.$axios.get('/api/smartbs/userPower/selectPersonList',{params:this.formData}).then((res) => {
? ? ? ? if (res.data.success) {
? ? ? ? ? this.tableData = res.data.data.rows
? ? ? ? ? this.total = res.data.data.total
? ? ? ? }
? ? ? })
? ? },
? ? // 點擊input 阻止冒泡 控制table顯示隱藏
? ? deptogglePanel (event) {
? ? ? event || (event = window.event)
? ? ? event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
? ? ? this.showTree ? this.tableHide() : this.tableShow()
? ? },
? ? tableShow() {
? ? ? this.showTree = true
? ? ? document.addEventListener('click', this.tableHideList, false)
? ? },
? ? tableHide() {
? ? ? this.showTree = false
? ? ? document.addEventListener('click', this.tableHideList, false)
? ? },
? ? tableHideList(e) {
? ? ? if (this.$refs.tableList&& !this.$refs.tableList.contains(e.target)) {
? ? ? ? this.tableHide()
? ? ? }
? ? },
? ? // 點擊table節(jié)點
? ? handleRegionNodeClick (data) {
? ? ? this.selectTableId = data.id
? ? ? this.showTree = false
? ? ? this.$refs.verification.resetFields();
? ? ? this.selectData.userName = data.userName // 用戶名字
? ? ? this.$emit('getUserName',this.selectData.userName)
? ? },
? ? dolNandleSizeChange(val) {
? ? ? this.formData.rows = val;
? ? ? this.formData.page = 1;
? ? ? this.getTableData()
? ? },
? ? dolHandleCurrentChange(val) {
? ? ? this.formData.page = val;
? ? ? this.getTableData()
? ? },
? ? // 手動輸入
? ? changeTab(val) {
? ? ? this.$emit('getUserName',val)
? ? },
? ? // 表單驗證
? ? submitForm() {
? ? ? this.$refs.verification.validate((valid) => {
? ? ? ? if (valid) {
? ? ? ? ? return valid
? ? ? ? } else {
? ? ? ? ? return false;
? ? ? ? }
? ? ? });
? ? },
? }
}

<style scoped lang="less">
.select-table {
? position: relative;
}
.treeDiv{
? width: 100%;
? margin-left: 80px;
? position:absolute;
? top: 50px;
? z-index: 999;
? background-color: #FFFFFF;
? border: 1px solid #e5e5e5;
? border-radius: 4px;
? padding: 10px;
? .el-table{
? ? border: 1px solid #ccc;
? ? border-radius: 6px;
? }
? .el-table /deep/ td{
? ? padding: 4px 0;
? }
}
</style>