统计
  • 建站日期:2021-03-10
  • 文章总数:699 篇
  • 评论总数:733 条
  • 分类总数:10 个
  • 最后更新:12月4日
文章 教学教程

ant vue 项目入坑

程序员阿鑫
首页 教学教程 正文


antvue项目入坑
-程序员阿鑫-带你一起秃头!
-第1
张图片

table 的列可以拖动

问题1 :demo 无法运行

1. 直接拷贝代码过来,发现传的参数有问题:

<template>
  <a-table bordered :columns="columns" :components="components" :dataSource="data">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

<script>
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';

Vue.component('vue-draggable-resizable', VueDraggableResizable);
const columns = [
  {
    title: 'Date',
    dataIndex: 'date',
    width: 200,
  },
  {
    title: 'Amount',
    dataIndex: 'amount',
    width: 100,
  },
  {
    title: 'Type',
    dataIndex: 'type',
    width: 100,
  },
  {
    title: 'Note',
    dataIndex: 'note',
    width: 100,
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
const 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',
  },
];
const draggingMap = {};
columns.forEach(col => {
  draggingMap[col.key] = col.width;
});
const draggingState = Vue.observable(draggingMap);
const ResizeableTitle = (h, props, children) => {
  let thDom = null;
  const { key, ...restProps } = props;
  const col = columns.find(col => {
    const k = col.dataIndex || col.key;
    return k === key;
  });
  if (!col.width) {
    return <th {...restProps}>{children}</th>;
  }
  const onDrag = (x, y) => {
    draggingState[key] = 0;
    col.width = Math.max(x, 1);
  };

  const onDragstop = () => {
    draggingState[key] = thDom.getBoundingClientRect().width;
  };
  return (
    <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
      {children}
      <vue-draggable-resizable
        key={col.key}
        class="table-draggable-handle"
        w={10}
        x={draggingState[key] || col.width}
        z={1}
        axis="x"
        draggable={true}
        resizable={false}
        onDragging={onDrag}
        onDragstop={onDragstop}
      ></vue-draggable-resizable>
    </th>
  );
};
export default {
  name: 'App',
  data() {
    this.components = {
      header: {
        cell: ResizeableTitle,
      },
    };
    return {
      data,
      columns,
    };
  },
};
</script>
<style lang="less">
.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>

2. 将标黄的部分改为,代码如下:

const ResizeableTitle = (h1) => {
  const props = h1.props
  const children = h1.children

问题二:应用到ant vue界面时,需要做如下修改:

1. 将下列代码挪到main.js

import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

 2. 将下列代码copy过去。

import Vue from 'vue'

// #region 从Table1 拷贝的东东

const draggingMap = {}
columns.forEach(col => {
  draggingMap[col.Id] = col.width
})

const draggingState = Vue.observable(draggingMap)

const ResizeableTitle = (h1) => {
  const props = h1.props
  const children = h1.children
  let thDom = null
  const { key, ...restProps } = props
  const col = columns.find(col => {
    const k = col.dataIndex || col.Id
    return k === key
  })
  if ((!col) || (!col.width)) {
    return <th {...restProps}>{children}</th>
  }
  const onDrag = (x, y) => {
    draggingState[key] = 0
    col.width = Math.max(x, 1)
  }

  const onDragstop = () => {
    draggingState[key] = thDom.getBoundingClientRect().width
  }
  return (
    <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
      {children}
      <vue-draggable-resizable
        key={col.rowKey}
        class="table-draggable-handle"
        w={10}
        x={draggingState[key] || col.width}
        z={1}
        axis="x"
        draggable={true}
        resizable={false}
        onDragging={onDrag}
        onDragstop={onDragstop}
      ></vue-draggable-resizable>
    </th>
  )
}
// #endregion

3. 拷贝样式

<style lang="less">
.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>

4. 表格的width=100 必须为数字的

5.columns 操作列增加 key: 'action', Id: 'action'

const columns = [

...

{ title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }

]

const columns = [
...
  { title: '操作', dataIndex: 'action', key: 'action', Id: 'action', scopedSlots: { customRender: 'action' } }
]


6.<a-table>标签添加vue属性:components="components"

<a-table
ref="table"
:components="components"
:columns="columns"

7.在data中增加 this.components

export default {
  components: {
    EditForm
  },
  mounted () {
    this.getDataList()
  },
  data () {
    this.components = {
      header: {
        cell: ResizeableTitle
      }
    }
    return {

 

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
这篇文章最后更新于2021-6-18,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
前端知识点总结——H5新标签
« 上一篇
学编程太枯燥,整理11个边玩游戏边学编程网站,越学越上瘾
下一篇 »
为了防止灌水评论,登录后即可评论!
注册登录

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
上号,带你一起秃头!

IP地址

热门文章

1
抖音无限礼物模拟小工具分享
2
QQ假红包引流QQ群教程及代码
4
卡QQ永久大会员方法

最新文章

标签