ant design之s-table的使用


1.使用
import STable from '@/components/Table/'
components: {STable},

 

 2.扩展

          <s-table
            bordered
            size="default"
            ref="table"
            :scroll="{ x: tableWidth + 'px'}"
            showPagination="true"
            rowKey="projectId"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            :columns="columnsContent"
    :rangPicker="range"
            :data="loadData"
          >
     //序号功能 pageNum pageSize默认是1,10 然后每次在loadata里面获取每次表格的分页信息 从而达到序号累计的功能
            <span slot="serial" slot-scope="text, record, index">
              {{ ((pageNum - 1)*pageSize) + (index+1) }}
            </span>
    / /title功能 其实这个title应该在组件里面统一加 避免每个列加 不过我没去研究
            <span slot="hoverTitle" :title="text" slot-scope="text">
              {{ text }}
            </span>
     //表尾合计功能 不过参数还是要自己算
            <template slot="footer" v-if="reportFormType == 'tzjhmx'">
              共计{{ summaryStatistics }}个项目,安排投资合计{{ summaryStatisticsMoney }}万元。
            </template>
    //跳转地址
            <span slot="goMxinfo" :title="text" slot-scope="text,record">
              <a @click="$router.push({ name: 'aa', query: { detailedIds: record.detailedIds} })" >{{ text }}</a>
            </span>
    //表格编辑功能
            <template v-for="        (col, i) in ['visualScheduleValue','architecturalQuantity','installationQuantity','demolitionQuantity','mainMaterialsQuantity','equipmentPurchaseQuantity','otherQuantity','basicReserveQuantity','installationMaterials','installedEquipments', 'capitalRatio', 'remarks', 'startCumulativeReleaseLastYear']" :slot="col" slot-scope="text, record">
              <editTable :key="col" :recordKey="col" :textProps="text" @change="onCellChange(record,col, $event)"></editTable>
            </template>
    //将后台的传值做一个处理 返回其他值
            <span slot="planBatchText" slot-scope="text">
              {{ matchingValue(text) }}
            </span>
          </s-table>
----------------------------------------------------------------------
rangPicker属性 就是查询时间范围的时候用 绑定的range是用在时间控件上的
<a-range-picker v-model="range"/>
初始化定义 range:null 这样就可以 查询的时候 表格会自动加上开始时间和结束时间

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM