chooseUser html结构分析

弹窗原生.html

 <el-dialog
        :title="$t('membershipIntroduction.chooseUser')"
        :visible.sync="modifypersonDialogVisible"
        width="800px"
        :modal-append-to-body="false"
      >
        <div
          class="modifypersonDiv"
          style="margin-bottom:30px"
        >
          <div class="modifypersonDivTop">
            <div>
              <span>{{ $t('membershipIntroduction.nickname') }}</span>
              <el-input
                size="small"
                v-model="userNameInput"
                :placeholder="$t('membershipIntroduction.Pleasecontent')"
              ></el-input>
            </div>
            <div>
              <span style="width:80px">{{ $t('membershipIntroduction.phoneNum') }}</span>
              <el-input
                size="small"
                v-model="mobileInput"
                :placeholder="$t('membershipIntroduction.Pleasecontent')"
              ></el-input>
            </div>
            <div>
              <span style="width:90px">{{ $t('membershipIntroduction.Realname') }}</span>
              <el-input
                size="small"
                v-model="realNameInput"
                :placeholder="$t('membershipIntroduction.Pleasecontent')"
              ></el-input>
            </div>
            <el-button
              type="primary"
              size="small"
              @click="getUserTabelListData"
            >{{ $t('membershipIntroduction.search')}}</el-button>
          </div>
          <!--底部表格-->
          <div
            class="content"
            v-if="page_one"
          >
            <table width='100%'>
              <thead>
                <tr>
                  <td>{{ $t('membershipIntroduction.userId') }}</td>
                  <td>{{ $t('membershipIntroduction.nickname') }}</td>
                  <td>{{ $t('membershipIntroduction.phoneNum') }}</td>
                  <td>{{ $t('membershipIntroduction.Realname') }}</td>

                </tr>
              </thead>
              <tbody v-if="tbodyFlag">
                <tr
                  v-for="(item,index) in trList"
                  :key="index"
                  :class="clickIindex===item.userId?'clickClass':''"
                  @click="handleClick(item.userId)"
                >

                  <td>{{item.userId}}</td>
                  <td>{{item.userName}}</td>
                  <td>{{item.mobile}}</td>
                  <td>{{item.realName}}</td>
                </tr>
              </tbody>

            </table>
            <div
              class="noData"
              v-if="!tbodyFlag"
            >
              <img :src="noImg">
              <span>{{ $t('membershipIntroduction.noData')}}</span>
            </div>
          </div>
          <div
            class="content_two"
            v-else
          >
            <table width='100%'>
              <thead>
                <tr>
                  <td>名称</td>

                  <td>链接</td>
                </tr>
              </thead>
              <tbody v-if="tbodyFlag">
                <tr
                  v-for="(item,index) in trList"
                  :key="index"
                  :class="clickIindex===index?'clickClass':''"
                  @click="handleClick(index)"
                >
                  <td>{{item.title}}</td>

                  <td class="tb_decorate_a">
                    {{item.path}}
                  </td>
                </tr>
              </tbody>

            </table>
            <div
              class="noData"
              v-if="!tbodyFlag"
            >
              <img :src="noImg">
              <span>暂无相关数据</span>
            </div>
          </div>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            size="small"
            @click="modifypersonDialogVisible = false"
          >取 消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleUserDialogSure()"
          >确 定</el-button>
        </span>
      </el-dialog>