antd table可编辑列显示不了数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd table可编辑列显示不了数据相关的知识,希望对你有一定的参考价值。
参考技术A 操作方法是:偶现bug:从接口获取数据后antdtable不显示数据.
解决:
获取请求的结果后,重新遍历一遍
antd table实现可伸缩列
前段时间客户要求table列需要可拖拽功能,狂问度娘,大部分都是从antd官网上面copy的。
极个别的不是,但是含有选择框的就不行了
最后还是找到了: https://www.jianshu.com/p/89b8ccd1eca0
需要用到插件 vue-draggable-resizable,安装最新的就行 无需指定版本
cnpm install --save vue-draggable-resizable
<a-table bordered :columns="columns" :components="components" :row-selection="rowSelection" :data-source="data"> <template v-slot:action> <a href="javascript:;">Delete</a> </template> </a-table>
<script> import Vue from \'vue\' import VueDraggableResizable from \'vue-draggable-resizable\' Vue.component(\'vue-draggable-resizable\', VueDraggableResizable) export default { name: \'arrival\', computed: { rowSelection() { return { onChange: (selectedRowKeys, selectedRows) => { }, } }, }, data() { this.components = { header: { cell: (h, props, children) => { const { key, ...restProps } = props const col = this.columns.find(col => { const k = col.dataIndex || col.key return k === key }) if (!col || !col.width) { return h(\'th\', { ...restProps }, [...children]) } const dragProps = { key: col.dataIndex || col.key, class: \'table-draggable-handle\', attrs: { w: 10, x: col.width, z: 1, axis: \'x\', draggable: true, resizable: false }, on: { dragging: (x, y) => { col.width = Math.max(x, 1) } } } const drag = h(\'vue-draggable-resizable\', { ...dragProps }) return h(\'th\', { ...restProps, class: \'resize-table-th\' }, [...children, drag]) } } } return { data: [ { key: 0, date: \'2018-02-11\', amount: 120, type: \'income\', note: \'transfer\' }, { key: 1, date: \'2018-03-11\', amount: 243, type: \'income\', note: \'transfer\' }, { key: 2, date: \'2018-04-11\', amount: 98, type: \'income\', note: \'transfer\' } ], columns: [ { title: \'Date\', ellipsis: true, dataIndex: \'date\', width: 200 }, { title: \'Amount\', ellipsis: true, dataIndex: \'amount\', width: 100 }, { title: \'Type\', ellipsis: true, dataIndex: \'type\', width: 100 }, { title: \'Note\', ellipsis: true, dataIndex: \'note\', width: 100 }, { title: \'Action\', ellipsis: true, key: \'action\', scopedSlots: { customRender: \'action\' } } ] } } } </script>
<style> .resize-table-th { position: relative; } .table-draggable-handle { position: absolute; transform: none !important; bottom: 0; height: 100% !important; left: auto !important; right: -5px; cursor: col-resize; touch-action: none; border: none; } </style>
以上是关于antd table可编辑列显示不了数据的主要内容,如果未能解决你的问题,请参考以下文章
Angular框架中使用ng-zorro-antd实现可编辑的table表格