正文 

当前位置： 首页 > 开发 > java教程

ant-design-vue中关于table组件的使用（初级）(代码片段)

cirry cirry     2023-04-13     792

关键词：

1. 如何自定义表格列头：

<a-table
        :columns="columns"
        :dataSource="dataSource">
        <span slot="customTitle"><a-icon type="smile-o"/>Name</span>
</a-table>
const columns = [　　
    　
      dataIndex: ‘name‘,　　　　// 自定义列表头，则不能设置title属性
      align: ‘left‘,
      slots:  title: ‘customTitle‘　　// 在这里定义一个slots属性，并设置一个title属性
    
]

页面将会渲染为如下：

技术图片

 

 

2.如何设置自定义单行样式

<a-table
        :columns="columns"
        :dataSource="dataSource">
        <span slot="action" slot-scope="record, index">　// 这里传入的值分别是：record：当前行的原始数据，index：当前行的索引
          <a @click="handleEdit(record.key)">编辑</a>
        </span>
</a-table>
const columns = [
    
      title: ‘菜单名称‘
      dataIndex: ‘name‘,　　// dataIndex的值对应的是，列数据在数据项中对应的 key
      key: ‘name‘,
      align: ‘left‘,
    ,
    
      title: ‘操作‘,
　　　 key: ‘action‘
      dataIndex: ‘action‘,
      width: ‘30%‘,
      scopedSlots:  customRender: ‘action‘ ,    //这一行自定义渲染这一列
      align: ‘center‘
    
 ]

页面展示如下：

技术图片

 3.如何设置表头，页脚和边框线？

<template>
  <a-table :columns="columns" :dataSource="data" bordered>　　// 这里添加bordered属性，就可以添加上边框线
    <template slot="name" slot-scope="text">
      <a href="javascript:;">text</a>
    </template>
    <template slot="title" slot-scope="currentPageData">　　// slot="title"就可以设置页头了，‘title‘改为其他值则没有页头
      Header--currentPageData　　　　// 这里打印一下currentData，看下是啥值
    </template> 
    <template slot="footer"> Footer </template>　　// 跟上同理
 </a-table> 
</template>
const columns = [　　// columns中并没有定义页头和页脚的相关代码
    
      title: ‘Name‘,
      dataIndex: ‘name‘,
      scopedSlots:  customRender: ‘name‘ ,
    ,
    
      title: ‘Cash Assets‘,
      className: ‘column-money‘,
      dataIndex: ‘money‘,
    ,
    
      title: ‘Address‘,
      dataIndex: ‘address‘,
    ,
  ];

页面显示就结果如下：

技术图片

 4.表格如何树形展示数据：

<a-table
    :columns="columns"
    :dataSource="dataSource"
    childrenColumnName="qq"　　// 这里可以选择子节点的属性名，一般都为‘children‘,这里我设置为‘qq‘,试下效果
    :rowSelection="rowSelection">　　// rowSelection是列表可选择的时候的配置项，后面介绍
    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
    <span slot="action" slot-scope="text, record, index">
       <a @click="handleEdit(record.key)">编辑</a>
    </span>
</a-table>
const columns = [
    
      dataIndex: ‘name‘,
      key: ‘name‘,
      align: ‘left‘,
      slots:  title: ‘customTitle‘
    ,
    
      title: ‘操作‘,
      dataIndex: ‘action‘,
      width: ‘30%‘,
      scopedSlots:  customRender: ‘action‘ ,
      align: ‘center‘
    
  ]
  const dataSource = [
    
      key: 1,
      name: ‘John Brown sr.‘,
      age: 60,
      address: ‘New York No. 1 Lake Park‘,
      qq: [　　　　　　　　　　　　//这里我把子节点的key，改为qq了
        
          key: 11,
          name: ‘John Brown‘,
          age: 42,
          address: ‘New York No. 2 Lake Park‘
        
      ]
    ,
    
      key: 2,
      name: ‘Joe Black‘,
      age: 32,
      address: ‘Sidney No. 1 Lake Park‘
    
  ]

页面显示效果如下：（显示正确）

技术图片

 

vue中关于$emit的用法（父子组件传值）

1、父组件可以使用props把数据传给子组件。2、子组件可以使用$emit触发父组件的自定义事件。vm.$emit(event,arg)//触发当前实例上的事件vm.$on(event,fn);//监听event事件后运行fn；例如：子组件：   <template>   &nb... 查看详情

vue中关于prop(代码片段)

组件之间的项目通信在vue中十分常见，父组件的数据传到子组件需要prop的支持，我们来看下prop1.html的特性名大小写不敏感，浏览器会把所有大写字母解释为小写字母，使用dom模板时，使用等价的kabad-case命名Vue.component(‘blog-post... 查看详情

mysql中关于tmp_table_size的问题

tmp_table_size已设置为2G目前项目数据库做个备份也才1.33G，为什么tmp_table总是在硬盘里创建？理论上来说临时表不可能大于2G，请详细说明，刚接触mysql优化，没有头绪！谢谢另外：网站运行速度并不慢，主要页面TTFB一般都在150ms... 查看详情

安全性测试drozer中关于attacksurface的一些理解

　　在推荐扫描AndroidAPP的工具中，扫描组件可以推荐drozer。使用过drozer的使用者知道，如何查找各个组件上的攻击层面runapp.package.AttackSurface。　　它的原理是在AndroidManifest.xml中检测所有组件是否含有exported并且为true。且当Androi... 查看详情

组件化项目中关于buildconfig的使用

参考技术A本文是组件化项目的时候关于BuildConfig的一些小知识点，因为Module解耦，不同的Module很难区分环境，所以我主要在BaseModule的build文件里面定义一个变量，主要是针对线上和线下环境，当然读者可以自定义更多的变量，希... 查看详情

依赖于angular的table组件

组件实现了以下功能1.列宽可动态拖动2.列数据排序3.列过滤4.列位置自由调整除了需要引入angular.js（我用的是1.4.6版本），还需要引用一个angular衍生出来的插件ngdraggable.js插件地址：https://github.com/fatlinesofcode/ngDraggable/blob/master/exa... 查看详情

ant-design-vue的a-table入门

参考技术A本来想写个详解的，一翻API，算了吧ε=(´ο｀*)))，写个入门教程吧。这样写，a-table就能简单地把数据原样渲染上去，这里有两个参数介绍一下：有时候只是把数据渲染上去还不能满足要求，比如要显示性别，后端传... 查看详情

vue中关于$emit的用法(代码片段)

一.事件关于什么是JavaScript事件可以参考：https://www.w3schools.com/js/js_events.asp二.$emitvue中对$emit的定义见：vm.$emit(eventName,[…args])参数：stringeventName[...args]触发当前实例上的事件。附加参数都会传给监听器回调。三.用途与示例1.父组... 查看详情

请教数据库中关于schema的理解

参考技术A在MySQL中创建一个Schema好像就跟创建一个Database是一样的效果，在SQLServer和Orcal数据库中好像又不一样.目前我只能理解，在mysql中schema<==>database。数据库中User和Schema的关系假如我们想了解数据库中的User和Schema究竟是... 查看详情

java中关于线程间协作所用关键字synchronized，wait,notify的用法

wait/notify（）关键字适用于一个线程通知另一个线程所需的条件状态已就绪，最常用于线程在循环中休眠直到获取特定条件的场景.例如，一个线程一直等待直到队列中有一个组件能够处理；当组件添加到队列时，另一个线程能够... 查看详情

如何修改ant-design-vue中的样式问题

参考技术A1.上手ant-design-vue组件框架，想着有些样式可能和项目有点出入2.在src目录下新建一个static静态的样式  3.在入口文件main.js引入css文件4.如果只想改变一个组件中的按键需要使用深度选择器::v-deep 查看详情

ant-design-vue:table指定expandedrowkeys后会导致其他的折叠按钮无法展开与回缩-展开所有缩回所有和单项展开缩回并存开发

ant-design-vue有个bug：table指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩，然后我们试了defaultExpandedRowKeys也只会在首次加载起作用expandedRowKeys：展开的行，控制属性字符串数组defaultExpandedRowKeys：默认展开的行字符串数组... 查看详情

oc中关于weak的粗浅理解

参考技术A这两天在研究oc中的weak实现原理，只是看明白了一点浅显的东西，参考地址：https://www.jianshu.com/p/2c2da28a5a53以下是自己的理解：基本用法：如果是面试，面试官肯定会要深入的问，为什么对象释放的时候，指针会自动置... 查看详情

前端中关于标签，表格，jquery的补充3/30(代码片段)

div和spandiv<div>是⼀个块级元素，通常与css配合使⽤，⽤于布局。<div>标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。<div>是⼀个块级元素。这意... 查看详情

bootstrapbootstrap-table表格组件

【Bootstrap-table】　　顾名思义，这个组件专注于bootstrap风格的表格的设计，并且提供了很多表格的基础和进阶的功能，给我们开发前端的表格省下很多力气。　　本文主要参考这位博主的系列文章：　　【http://www.cnblogs.com/landean... 查看详情

ant-design-vue定制主题色

Ant-design-vue定制主题色要求：框架本身使用的蓝色主题色，需要更换成UI指定的颜色。AntDesignVue的样式变量antd的样式使用了Less作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。以下是一些最... 查看详情

Django错误中关于页面的***

】Django错误中关于页面的***【英文标题】：Top-levelaboutPageinDjangoerror【发布时间】：2015-03-1610:26:47【问题描述】：我想在我的Django站点(eg:http://127.0.0.1:8000/about)中有一个***about页面，该页面指向基于民意调查应用程序中关于视图的... 查看详情

jquery中关于对象类型的判断原理

class2type[core_toString.call(obj)] jquery中关于对象类型的判断原理jquery源码中关于类型判断的工具函数为type，调用方法为$.type()或者jQuery.type()，关于type函数的实现为：1type:function(obj){2if(obj==null){3returnString(obj);4}5//Support:Safari 查看详情