小程序直播上线_ant design vue中表格指定格局烘托

日期:2021-01-05 类型:行业动态 

关键词:学生个人网页制作代码,如何做网页或网站,网页游戏制作,dw网页设计作业,动态网页

ant design vue中表格指定格式渲染方式       这篇文章主要介绍了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="选择操作" @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 type="arrow-up" / /span 
 span v-if='!record.progressstatus' a-icon 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 {
 pro凡科抠图: {
 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中表格指定格式渲染方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。