ant design vue中表格指定格式渲染方式

注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别

渲染方法1:

指定渲染函数:

const columns = [
   {
    title: '排名',
    dataIndex: 'key',
    customRender: renderContent // 渲染函数的规则
   }, {
    title: '搜索关键词',
    dataIndex: 'keyword',
    customRender: (text, row, index) => {
      if (index < 4) { // 前4行数据以a标签的形式被渲染
       return <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>
      }
      return { // 否则以独占4列的文本形式被渲染
       children: text,
       attrs: {
        colSpan: 4
       }
      }
    }
   }
]
const renderContent = (value, row, index) => {
 const obj = {
  children: value,
  attrs: {}
 }
 return obj
}

渲染方法2:

直接调用对应插槽模板:

<a-table :columns="columns" :dataSource="data" :pagination='pagination'>
  <template slot="operation">
    <a-select placeholder="选择操作" style="width: 100%" @change="listHandleChange">
     <a-select-option value="1">项目进度</a-select-option>
     <a-select-option value="2">质量管控</a-select-option>
     <a-select-option value="3">运维监控</a-select-option>
    </a-select>
  </template>
  <template slot='progress' slot-scope="text,record">
     <span>{{text}}</span>
     <span v-if='record.progressstatus'><a-icon class='arrow-up' type="arrow-up" />    </span>
     <span v-if='!record.progressstatus'><a-icon class='arrow-down' type="arrow-down" /></span>
  </template>
</a-table>

const columns = [
   {
    title: '编号',
    dataIndex: 'number',
    customRender: renderContent
   }, {
    title: '项目名称',
    dataIndex: 'name',
    customRender: (text, row, index) => {
     return {
      children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>,
      attrs: {}
     }
    }
   }, {
    title: '项目进度',
    dataIndex: 'progress',
    scopedSlots: { customRender: 'progress' } // 模板中对应的slot-scope可以用来传递参数,其中第一个参数是当前字段对应的值progress,第二个参数是当前字段对应的所有值对象,即整个data[n]
   }, {
    title: '操作',
    dataIndex: 'operate',
    scopedSlots: { customRender: 'operation' } // 直接对应插槽名为operation的模板
   }
]

const data = [
  {
  key: 6,
  number: 6,
  name: '雅典娜',
  progress: '88%',
  progressstatus: 1
 }
]

补充知识:Ant design vue框架,table控件中customRow用法的一个坑

今天在写代码时,用到Ant design框架中的<a-table>控件,其中的一个需求是:点击table中的一行,需要执行一些操作。因为没有默认的行点击事件,需要用到customRow来进行自定义。

这个方法,在官方的文档中,有使用说明,如下:

<Table
 customRow={(record) => {
  return {
   props: {
    xxx... //属性
   },
   on: { // 事件
    click: (event) => {},    // 点击行
    dblclick: (event) => {},
    contextmenu: (event) => {},
    mouseenter: (event) => {}, // 鼠标移入行
    mouseleave: (event) => {}
   },

  };
 )}
 customHeaderRow={(column) => {
  return {
   on: {
    click: () => {},    // 点击表头行
   }
  };
 )}
/>

官方的这个写法,应该是属于lamada的语法,今天我在使用时,也是使用这种写法。

如下:

methods:{
 getDetailList(id){
  //执行具体的操作
  },
 rowClick: (record, index) => ({
    // 事件
    on: {
     click: event => {
      // 点击该行时要做的事情
      console.log('record', record)
      console.log('index', index)
      console.log('event', event)
      this.getDetailList(record.id) //这一行会报错,报未定义
     }
    }
   })
  }

在执行时,会报错,如下:

[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList' of undefined”。

不使用lamada表达式,则不会出现这样的问题,修改后的rowClick方法如下:

rowClick(record, index) {
   return {
    on: {
     click: () => {
      console.log(record, index)
      this.getDetailList(record.matbillid)
     }
    }
   }
  },

可正常执行,并能正确调用getDetailList方法

以上这篇ant design vue中表格指定格式渲染方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • vue+element-ui实现表格编辑的三种实现方式

    1.表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • Ant Design Vue中的table与pagination的联合使用方式

    目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用 表格table使用链接:ant desig

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • Ant Design Vue 修改表格头部样式的详细代码

    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码.首先用到的是customHeaderRow这个API,类型是一个函数 1.HTML部分 <a-table size='small' // 样式大小 :columns="columns" :data-source="data" bordered :pagination="false" // 不显示页数 :customHeaderRow="customR

  • ant design vue 表格table 默认勾选几项的操作

    为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

随机推荐