antd表格的一些

已于 2022-06-21 15:41:07 修改
阅读量170 收藏
点赞数
文章标签： javascript
于 2022-06-21 13:54:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/e_isolate/article/details/125334324
版权

antd 表格识别data中的"\n"style="white-space:pre-line;"
总条数

:show-total="total => `总条数 ${ipagination.total} `"

表格某列悬停弹窗

  <span slot="action1"
                slot-scope="text, record">
            <a @mouseover="fastView(record)">
              <a-popover title="详情"
                         placement="left">
                <template slot="content">

                  <div style="width:1100px">
                    <ReportTable :id="recorderNO"></ReportTable>
                  </div>
                </template>
                <span>子项目概况</span>
              </a-popover>
            </a>
   </span>

编辑表格

 <template v-for="col in ['proportion', 'projectProgress', 'nodeRequirements','reply','bigEvents','startMeet','coordination','reviewMeetTime','reviewMeetIdea','reviewMeet']"
                :slot="col"
                slot-scope="text, record, index">
        <div :key="col">
          <div v-if="record.editable">
            <a-tooltip>
              <template slot="title">
                {{text}}
              </template>
              <a-textarea v-if="record.editable&&(col!='proportion')"
                          style="margin: -5px 0"
                          :value="text"
                          @change="e => handleChange(e.target.value, record.key, col)" />
              <a-input v-if="record.editable&&(col=='proportion')"
                       style="margin: -5px 0"
                       max='100'
                       min='0'
                       type="number"
                       oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null"
                       :value="text"
                       @change="e => handleChange(e.target.value, record.key, col)" />
            </a-tooltip>
          </div>

          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>

表格多列悬停

 <template v-for="col in ['totalContractAmout', 'totalPayAmout', 'totalSettleAmout','totalArrearAmout']"
                  :slot="col"
                  slot-scope="text, record, index">
          <div :key="col">
            <span @mouseover="fastView(record)">
              <a-popover title="详情"
                         placement="left">
                <template slot="content">

                  <div style="width:100px">
                    <ReportTable></ReportTable>
                  </div>
                </template>
                <span>{{text}}</span>
              </a-popover>
            </span>

          </div>
        </template>

表格编辑

<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form layout="inline"
              @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6"
                 :lg="7"
                 :md="8"
                 :sm="24">
            <a-form-item label="项目名称">
              <a-input placeholder="请输入项目名称"
                       v-model="queryParam.subProjectName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6"
                 :lg="7"
                 :md="8"
                 :sm="24">
            <a-form-item label="项目编号">
              <a-input placeholder="请输入项目编号"
                       v-model="queryParam.subProjectNo"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6"
                 :lg="7"
                 :md="8"
                 :sm="24">
            <span style="float: left;overflow: hidden;"
                  class="table-page-search-submitButtons">
              <a-button type="primary"
                        @click="searchQuery"
                        icon="search">查询</a-button>
              <a-button type="primary"
                        @click="searchReset"
                        icon="reload"
                        style="margin-left: 8px">重置</a-button>

            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table :show-total="total => `总条数 ${ipagination.total} `"
             :pagination="ipagination"
             :columns="columns"
             :data-source="data"
             @change="handleTableChange"
             :scroll="{ x: 2000 }"
             bordered>
      <template v-for="col in ['plan', 'finish', 'problem','help','nextPlan','bigEvents','proportion','projectProgress']"
                :slot="col"
                slot-scope="text, record, index">
        <div :key="col">
          <div v-if="record.editable">
            <a-tooltip>
              <template slot="title">
                {{text}}
              </template>
              <a-textarea v-if="record.editable&&(col!='proportion')"
                          style="margin: -5px 0"
                          :value="text"
                          @change="e => handleChange(e.target.value, record.key, col)" />
              <a-input v-if="record.editable&&(col=='proportion')"
                       style="margin: -5px 0"
                       type="number"
                       max='100'
                       min='0'
                       oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>100)value=100;if(value<0)value=null"
                       :value="text"
                       @change="e => handleChange(e.target.value, record.key, col)" />
            </a-tooltip>

          </div>

          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="action"
                slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">保存</a>
            <a-popconfirm title="确定取消?"
                          @confirm="() => cancel(record.key)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''"
               @click="() => edit(record.key)">编辑</a>
          </span>
        </div>
      </template>
    </a-table>
  </a-card>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
const columns = [
  {
    title: '#',
    dataIndex: '',
    key: 'rowIndex',
    width: 50,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    }
  },

  {
    title: '项目名称',
    align: "center",
    width: 100,
    dataIndex: 'projectName'
  },
  {
    title: '项目编号',
    align: "center",
    width: 100,
    dataIndex: 'zsxmProjectNo'
  },
  {
    title: '负责人',
    align: "center",
    width: 100,
    dataIndex: 'personName'
  },
  {
    title: '本月生产计划',
    align: "center",
    width: 100,
    dataIndex: 'plan',
    scopedSlots: { customRender: 'plan' },
  },
  {
    title: '本月计划完成情况',
    align: "center",
    width: 100,
    dataIndex: 'finish',
    scopedSlots: { customRender: 'finish' },
  },
  {
    title: '本月存在的问题及原因',
    align: "center",
    width: 100,
    dataIndex: 'problem',
    scopedSlots: { customRender: 'problem' },
  },
  {
    title: '本月需要公司层面协调解决的问题',
    align: "center",
    width: 100,
    dataIndex: 'help',
    scopedSlots: { customRender: 'help' },
  },
  {
    title: '下月生产计划',
    align: "center",
    width: 100,
    dataIndex: 'nextPlan',
    scopedSlots: { customRender: 'nextPlan' },
  },

  {
    title: '项目进度',
    align: "center",

    children: [
      {
        title: "完成总任务的占比（%）",
        align: "center",
        width: 100,
        dataIndex: 'proportion',
        scopedSlots: { customRender: 'proportion' },
      },
      {
        title: "进度说明",
        align: "center",
        width: 100,
        dataIndex: 'projectProgress',
        scopedSlots: { customRender: 'projectProgress' },
      },
    ]
  },
  {
    title: '项目大事记',
    align: "center",
    width: 100,
    dataIndex: 'bigEvents',
    scopedSlots: { customRender: 'bigEvents' },
  },
  {
    title: '操作',
    key: 'action',
    align: "center",
    width: 100,
    scopedSlots: { customRender: 'action' },
  },
];

const data = [];

export default {
  mixins: [JeecgListMixin],
  data () {
    return {
      data,
      columns,
      editingKey: '',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      url: {
        list: "/pomel/person/userMouthPerson",
      },
      mounth: "",
      cacheData: "",
      queryParam: {}
    };
  },
  created () {
    this.loadData();
  },
  methods: {
    getQueryParams () {
      var param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      param.zsx91110xmzt014 = "进行中"
      return filterObj(param);
    },
    getQueryField () {
      //TODO 字段权限控制
    },
    loadData (arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      debugger
      var param = this.getQueryParams();//查询条件
      postAction(this.url.list, param).then((res) => {
        debugger
        if (res.success) {
          this.mounth = res.result[0].mounth;
          debugger
          for (let i = 0; i < res.result.length; i++) {
            res.result[i].key = i
          }
          this.data = res.result;
          this.ipagination.total = res.result.length;
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleChange (value, key, column) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    handleTableChange (pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      console.log(sorter);
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    edit (key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save (key) {
      debugger
      const newData = [...this.data];
      this.cacheData = this.data.map(item => ({ ...item }));
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.key);
      const targetCache = newCacheData.find(item => key === item.key);
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
      this.data.map(item => {
        if (item.key == key) {
          debugger
          postAction("/pomel/person/updatePerson", item).then((res) => {
            debugger
          })
          return
        }
      })

    },
    cancel (key) {
      debugger
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.cacheData = this.data.map(item => ({ ...item }));
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.key));
        delete target.editable;
        this.data = newData;
      }
    },
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
ISOLATE_E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd中表格总结
weixin_46328539的博客
04-29 377
记录下antd表格复选框问题，（自己备用） <!-- --> <template> <div> <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :pagination="pagination" :scroll="{ x: true, y: 558 }" rowKey="id"
react-antd中表格的使用(数据的请求，带删除功能的表格)
weixin_45745641的博客
04-03 5477
最近在学习react-antd框架，表格这一块在项目中的使用频率很高，最近在学习这一块的内容，所以记录一下
基于antdv封装的特殊复杂表格，带通行描述信息、可展示通行的单元格信息、可跨页选择数据功能、分页功能、可编辑单元格功能
艾小逗
06-29 2278
1. 可展示通行的单元格信息2. 可跨页选择数据功能3. 表单插槽、合计插槽、操作按钮区插槽4. 分页功能5. 接口内请求api6. 可编辑单元格7. 表格组件暴漏出的方法：查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】
antd 表格 a-table
努力搬砖的小码
04-07 102
borded : 显示所有的格格pagination: 显示分页。
Antd标准表格模板
qq_54376898的博客
08-14 186
Antd标准表格模板
antd 表格列宽自适应方法以及错误处理操作
01-18
在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的...
Antd的一些用法操作
12-16
本文将详细介绍如何按需引入 Antd，以及如何配置和使用 Modal 对话框、Message 全局提示、Table 表格等核心功能。 首先，为了减少项目体积，我们采用按需引入的方式加载 Antd 组件。在项目中，不需要全局引入 `antd...
Antd的table组件表格的序号自增操作
01-18
1，效果图 2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', ...Link to={{ pathname : '/info/Edit' , query : { id : ...
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的...
antd通过 filterDropdown 自定义按某天时间搜索功能
10-16
在Ant Design（简称antd）这个React UI库中，`filterDropdown` 是Table组件的一个属性，用于自定义列的筛选下拉菜单。通过`filterDropdown`，我们可以实现更复杂的搜索功能，比如按照特定日期进行筛选。在给定的示例...
antd组件Table表格实现懒加载
weixin_65494806的博客
06-11 2363
对Table表格实现懒加载，懒加载也称按需加载，初次渲染时只渲染部分数据，用户下滑到一定区域的时候再在请求下一页的数据。
《PC端UI框架》Ant Design V4 中的表格
花铛
04-16 560
分页控件默认显示英文，修改为中文简体： antd 目前的默认文案是英文，如果需要使用简体中文，antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。 import zhCN from 'antd/lib/locale/zh_CN'; import { ConfigProvider } from 'antd'; return ( <ConfigProvider locale={zhCN}> <App /> </Config
react中使用antd中的 Table 组件（数据展示，分页，设置可选项）
g2255yuuhgy的博客
07-23 7534
React是由Facebook开发的一种用于构建用户界面的JavaScript库，它提供了一种声明式的编程模型，使得构建复杂的UI变得更加简单和高效。React的组件化开发模式使得代码可维护性更强，而Antd的可重用组件则减少了开发者的重复劳动，同时保证了应用的一致性和用户体验。在使用表格时不知大家有没有被里面各种各样的功能所困扰，本来你只需要使用其中一个功能，但官网的查看代码总是多个功能重合在一次展示，不利于大家去学习，面对初学者很不友好，这也是我写这篇的目的，我将里面常用的功能分离拿出来介绍。
antd组件中的Table表格相关知识
qq_41988113的博客
07-28 2143
打印出来text和record，可以看到，text是location的值，record是这一整行的值。一、Column（列描述数据对象，是columns中的一项，）生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引。二、实现Table表格的拖拽排序。......
Antd可编辑表格和总计
最新发布
qq_43796489的博客
07-03 70
【代码】Antd可编辑表格和总计。
Antd table 前端封装导出表格组件 excelJS
weixin_44416080的博客
02-28 760
前端封装 Antd table 导出Excel 表格组件
React：Antd中Table表格实现自定义筛选
QY_99的博客
01-18 3806
React：Antd中Table表格实现自定义筛选
react / antd ProTable - 高级表格 合并行，子表头
L_C_sunny的博客
01-04 1609
ProTable - 高级表格 合并行，以及ProTable的用法。
关于antd中table表格排序以及筛选问题汇总
bossweiga的博客
06-18 1551
因为需要去监听col中sorter,图标跟筛选图标高亮以及变灰的问题,这里需要去监听对应的属性值的变化之后，在变化的基础上去重新设置colum的值，因为需要去点击筛选项去生成选项，这里需要封装子组件去实现，在子组件中的useEffect中去在渲染时执行一次，然后。功能目前还有问题，使用setState目前导致没法及时更新col,后续会继续更新。然后随便写点data数据。
antd表格嵌套表格
06-01
Ant Design的表格组件支持嵌套表格功能。...在父表格组件中，我们使用了antd的expandable属性，指定了展开子表格的方式和渲染方法。 希望这个示例能够帮助你了解如何在Ant Design的表格组件中实现嵌套表格功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值