选择用户组件

dialog

<el-dialog custom-class="innerDialog" width="950px" title="选择管理员" append-to-body :visible.sync="innerVisible">
          <div style="height: 500px;">
            <el-col :span="4" :xs="24">
            <div class="head-container">
              <el-tree size="small" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                @node-click="handleNodeClick" />
            </div>
          </el-col>

          <!--用户数据-->
          <el-col :span="20" :xs="24">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item label="用户名称" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
                  @keyup.enter.native="handleQueryUser" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryUser">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-table size="small" :data="userList" :row-style="tableRowStyle" @current-change="handleCurrentChange">
              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
              <el-table-column label="用户名称" align="center" key="userName" prop="userName"
                :show-overflow-tooltip="true" />
              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"
                :show-overflow-tooltip="true" />
              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName"
                :show-overflow-tooltip="true" />
              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getUserList" />
          </el-col>

          </div>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerVisible = false">确 定</el-button>
      </div>
          

        </el-dialog>

操作按钮

<el-form-item label-width="100px" label="审核人" prop="auditorsId">
                                <el-input v-model="form.auditorsId" v-prevent-input placeholder="">
                                    <el-button slot="append" @click="choseseManage(true)" style="color:blueviolet" >选择审核员</el-button>
                                </el-input>
                                </el-form-item>

　　data数据

export default {

    data() {   
        return {
    
             innerVisible: false,

      // 选中的管理员

      selectedUserRow: null,

 

      // 部门树选项

      deptOptions: undefined,

      defaultProps: {

        children: "children",

        label: "label"

      },

      // 用户表格数据

      userList: null,

        }
    },
　　//自定义指令定义
　　  directives: {

    'prevent-input': {

          // ... 指令定义 ...

          inserted(el) {

           

          },

        },

  　　},

 

　　methods:{
　　　　    // 部门树

    /** 查询部门下拉树结构 */

    getDeptTree() {

      deptTreeSelect().then(response => {

        this.deptOptions = response.data;

      });

    },

    // 筛选节点

    filterNode(value, data) {

      if (!value) return true;

      return data.label.indexOf(value) !== -1;

    },

    // 节点单击事件

    handleNodeClick(data) {

      this.queryParams.deptId = data.id;

      this.handleQueryUser();

    },

    /** 搜索用户按钮操作 */

    handleQueryUser() {

      this.queryParams.pageNum = 1;

      this.getUserList();

    },

    /** 查询用户列表 */

    getUserList() {

      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {

        this.userList = response.rows;

        this.total = response.total;

      }

      );

    },

    // 单选用户的数据

    handleCurrentChange(val) {

      this.selectedUserRow = val;

 

      this.form.auditors = val.userName;

      this.form.auditorsId = val.id;

     

     

      },

    tableRowStyle({ row, rowIndex, store }) {

      // 根据行是否被选中来返回不同的样式对象

      if (row === this.selectedUserRow) {

        return {

          backgroundColor: 'rgb(202, 202, 202)' // 例如一个浅灰色

        };

      }

      return {};

    },

  }

　　}

}

　　

<el-dialog custom-class="innerDialog" width="950px" title="选择管理员" append-to-body :visible.sync="innerVisible">

          <div style="height: 500px;">

            <el-col :span="4" :xs="24">

            <div class="head-container">

              <el-tree size="small" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"

                :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current

                @node-click="handleNodeClick" />

            </div>

          </el-col>

          <!--用户数据-->

          <el-col :span="20" :xs="24">

            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">

              <el-form-item label="用户名称" prop="userName">

                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"

                  @keyup.enter.native="handleQueryUser" />

              </el-form-item>

              <el-form-item>

                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryUser">搜索</el-button>

                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

              </el-form-item>

            </el-form>

            <el-table size="small" :data="userList" :row-style="tableRowStyle" @current-change="handleCurrentChange">

              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />

              <el-table-column label="用户名称" align="center" key="userName" prop="userName"

                :show-overflow-tooltip="true" />

              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"

                :show-overflow-tooltip="true" />

              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName"

                :show-overflow-tooltip="true" />

              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />

            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"

              :limit.sync="queryParams.pageSize" @pagination="getUserList" />

          </el-col>

          </div>

          <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="innerVisible = false">确 定</el-button>

      </div>

         

        </el-dialog>