vue+antd 通用列表模板开发

日常开发中涉及到较多列表功能，如何设计一模板，传递一JSON字符内容，即可呈现对应列表，对提升开发效率和降低开发难度有较大帮助，因此设计常规列表需解决包含查询条件、查询按钮、呈现列表等元素

源码地址

一、动态查询条件设计

 <div class="filter-container">
      <!--
      a-form-model rules 对动态标签处理时，item-label * 号不出现,需一开始指定，必须绑定,所直接在a-form-model-item标签中直接绑定，也要提取准备好require=true，先设置true，最后再根据规则调整位false
      -->
      <a-form-model ref="ruleForm" :model="formModel" layout="inline">
        <a-row v-for="(rowItem ,rowIndex) in formRowCollapseKey['noCollapseKey']" :key="rowIndex" :gutter="rowItem.gutter">
          <a-col v-for="(formItem,colIndex) in formRowActiveData[rowItem.rowKey].colList" :key="colIndex" :span="formItem.span">
            <input-tpl-ui
              v-show="rowItem.rowType === 'form'"
              ref="modalFormTplUi"
              :param-data="initData"
              :form-item="formColActiveData[formItem.model]"
              :active-enum-list="activeEnumData[formItem.model]"
              :active-enum-data="activeEnumData"
              :modal-fn-data="modalFn"
              :ui-page-url="uiPageUrl"
              :init-src-label="initSrcObj.initSrcLabel"
              :rules="rules"
              :modal-form="formModel"
              :form-event="formEvent"
              @selectSearch="inputSelectSearch"
              @inputSearch="inputSearch"
              @changeEvent="inputChangeEvent"
              @clearEmpty="clearEmpty"
            />
          </a-col>
        </a-row>
      </a-form-model>
    </div>

二、动态查询按钮设计

 <div class="table-operator">
      <div v-if="showChart.defaultShow" :id="tableEchartId" style="width: 100%;height: 270px" />
    </div>
    <div class="table-operator">
      <!-- <div style="display: flex; flex-wrap: wrap"> -->
      <operator-btn-tpl-list
        :session-config-tpl-data="sessionConfigTplData"
        :toolbar-menu-data="tableToolbarMenu"
        :toolbar-list-data="tableToolbarList"
        :table-selected-key-data="tableSelectedKey"
        :ui-page-url="uiPageUrl"
        @tableOperatorBtnOnClick="tableOperatorBtnOnClick"
        @tableOperatorBtnUpload="tableOperatorBtnUpload"
      />
    </div>

三、动态列表设计

 <a-table
        :ref="tableId"
        table-layout="auto"
        fixed="true"
        :bordered="tableBordered"
        :row-key="tableRowKey"
        :size="tableSize"
        :loading="loading"
        :pagination="tablePagination"
        :row-selection="{selectedRowKeys: tableSelectedKey,onChange: tableOnSelect,type:rowSelectType}"
        :columns="listColActiveList"
        :custom-row="processCustomRow"
        :data-source="tableData"
        :scroll="tableScroll"
        @change="tableOnChange"
      >
        <span v-for="(titleIcon) in titleIconList" :slot="titleIcon.slot" :key="titleIcon.slot">
          <a-icon v-if="titleIcon.leftIcon !== undefined" :type="titleIcon.leftIcon.icon" @click="clickIconEvent(titleIcon)" /> {{ titleIcon.title }}
          <a-icon v-if="titleIcon.rightIcon !== undefined" :type="titleIcon.rightIcon.icon" @click="clickIconEvent(titleIcon)" />
          <a-tooltip v-if="titleIcon.tooltipIcon !== undefined" :title="titleIcon.tooltipIcon.title">
            <a-icon :type="titleIcon.tooltipIcon.icon" />
          </a-tooltip>
        </span>
        <!--{ x: 1100 }滚动宽度 -->
        <!--        <template v-if="initHeadTitle" slot="title" slot-scope="text,record,rowIndex,rowColumn">-->
        <!--          Header-->
        <!--        </template>-->
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`查找 ${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            查询
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <a-icon
          slot="filterIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <template slot="progress" slot-scope="text,record,rowIndex,rowColumn">
          <span>
            <a @click="processOnClick(text,record,rowIndex,rowColumn)">
              {{ text }}
            </a>
          </span>
        </template>
        <span slot="input" slot-scope="text, record,rowIndex,rowColumn">
          <a-input
            style="margin: -5px 0"
            :value="text"
            @change="e => tableInputChange(e.target.value, rowColumn.dataIndex, rowIndex)"
          />
        </span>
        <span slot="inputNumber" slot-scope="text, record,rowIndex,rowColumn">
          <a-input-number
            style="width: 100%"
            :value="text"
            step="10"
            @change="e => tableInputNumberChange(e, rowColumn.dataIndex, rowIndex)"
          />
        </span>
        <span slot="select" slot-scope="text, record,rowIndex,rowColumn">{{columnFiltersData.S_OBJ_MSG}}}
          <a-select style="width: 120px" @change="e => tableInputChange(e, rowColumn.dataIndex, rowIndex)" :value="text">
            <a-select-option v-for="(data,i) in activeEnumData[rowColumn.dataIndex]" :key="data.value">
              {{ data.text }}
            </a-select-option>
          </a-select>
        </span>
        <span slot="switch" slot-scope="text, record,rowIndex,rowColumn">
          <a-switch :checked="text" default-checked @change="e => tableInputChange(e, rowColumn.dataIndex, rowIndex)" />
        </span>
        <span slot="tags" slot-scope="text, record,rowIndex,rowColumn">
          <a-tag
            v-for="tag in customRowIdxTagsObj[rowColumn.dataIndex][rowIndex]"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="icon" slot-scope="text">
          <a-icon :type="text" />
        </span>
        <span slot="avatar" slot-scope="text">
          <a-avatar :src="text" />
        </span>
        <!--        <p slot="expandedRowRender" slot-scope="text, record,rowIndex,rowColumn" style="margin: 0">-->
        <!--          {{ record.description }}-->
        <!--        </p>-->
        <span slot="action" slot-scope="text, record,rowIndex,rowColumn">
          <span v-for="(btnItem,index) in customRowIdxBtnObj[rowColumn.dataIndex][rowIndex]" :key="index">
            <span v-if="btnItem.compTag === 'text'" :key="index">{{ btnItem.name }}{{ text }}
            </span>
            <router-link v-else-if="btnItem.compTag === 'r'" :key="index" :to="{query:{id:1}}" target="_blank">
              {{ btnItem.name }}
            </router-link>
            <a-popconfirm v-else-if="btnItem.compTag === 'confirm'" :key="index" :title="btnItem.title" @[btnItem.eventName]="columnBtnOnClick(btnItem, record)">
              <a>{{ btnItem.name }}</a>
            </a-popconfirm>
            <a v-else :key="index" @[btnItem.eventName]="columnBtnOnClick(btnItem, record)">
              <a-icon v-if="btnItem.leftIcon !== undefined" :type="btnItem.leftIcon.icon" @click="clickIconEvent(btnItem)" /> {{ btnItem.name }}{{ text }}
              <a-icon v-if="btnItem.rightIcon !== undefined" :type="btnItem.rightIcon.icon" @click="clickIconEvent(btnItem)" />
              <a-tooltip v-if="btnItem.tooltipIcon !== undefined" :title="btnItem.tooltipIcon.title">
                <a-icon :type="btnItem.tooltipIcon.icon" />
              </a-tooltip>
            </a>
            <a-divider v-if="(customRowIdxBtnObj[rowColumn.dataIndex][rowIndex] !== undefined && customRowIdxBtnObj[rowColumn.dataIndex][rowIndex].length -1) > index" :type="tableDividerType" />
          </span>
          <a-divider v-if="customRowIdxBtnObj[rowColumn.dataIndex][rowIndex] !== undefined && customRowIdxBtnObj[rowColumn.dataIndex][rowIndex].length > 0 && customRowIdxMenuObj[rowColumn.dataIndex][rowIndex].length > 0" :type="tableDividerType" />
          <a-dropdown v-if="customRowIdxBtnObj[rowColumn.dataIndex][rowIndex] !== undefined && customRowIdxMenuObj[rowColumn.dataIndex][rowIndex].length > 0">
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item v-for="(menuItem,index) in customRowIdxMenuObj[rowColumn.dataIndex][rowIndex]" :key="index">
                <a v-show="menuItem.show" v-if="menuItem.compTag === 'a'" @[menuItem.eventName]="columnBtnOnClick(menuItem, record)">
                  <a-icon v-if="menuItem.leftIcon !== undefined" :type="menuItem.leftIcon.icon" @click="clickIconEvent(menuItem)" /> {{ menuItem.name }}{{ text }}
                  <a-icon v-if="menuItem.rightIcon !== undefined" :type="menuItem.rightIcon.icon" @click="clickIconEvent(menuItem)" />
                  <a-tooltip v-if="menuItem.tooltipIcon !== undefined" :title="menuItem.tooltipIcon.title">
                    <a-icon :type="menuItem.tooltipIcon.icon" />
                  </a-tooltip>
                </a>
                <a-popconfirm v-else-if="menuItem.compTag === 'confirm'" :title="menuItem.title" @[menuItem.eventName]="columnBtnOnClick(menuItem, record)"><a>{{ menuItem.name }}</a></a-popconfirm>
                <a v-else @[menuItem.eventName]="columnBtnOnClick(menuItem, record)">
                  <a-icon v-if="menuItem.leftIcon !== undefined" :type="menuItem.leftIcon.icon" @click="clickIconEvent(menuItem)" /> {{ menuItem.name }}{{ text }}
                  <a-icon v-if="menuItem.rightIcon !== undefined" :type="menuItem.rightIcon.icon" @click="clickIconEvent(menuItem)" />
                  <a-tooltip v-if="menuItem.tooltipIcon !== undefined" :title="menuItem.tooltipIcon.title">
                    <a-icon :type="menuItem.tooltipIcon.icon" />
                  </a-tooltip>
                </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>

四、数据格式样例

 

源码地址