vue antd table customRender 自定义标签

vue2x+antd1x

columns 参数必须放到data里面进行声明否则失效

template显示

<template><a-table :columns="columns" :dataSource="dataSource" :pagination="false" ></a-table>
</template>

有效的方法

<script>
export default {data() {return {dataSource: [],columns:[{title: 'Date Sent',dataIndex: 'paymentDate',key: 'paymentDate',align: 'center',customRender: (text,record) => {if (record.status == 2) {return <span style="color:red">{ text }</span>;}else{return text}},},{title: 'Sender Account Name',key: 'accountName',dataIndex: 'accountName',align: 'center',},]}}
}
</script>

无效

const columns = [{title: 'Date Sent',dataIndex: 'paymentDate',key: 'paymentDate',align: 'center',customRender: (text,record) => {if (record.status == 2) {return <span style="color:red">{ text }</span>;}else{return text}},},{title: 'Sender Account Name',key: 'accountName',dataIndex: 'accountName',align: 'center',},
]
<script>
export default {data() {return {dataSource: [],columns,}}
}
</script>

vue3x+antd3x

js写法

<template>
<div>{{num}}</div><a-tableclass="ant-table-striped"size="middle":columns="columns":data-source="data":row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"/>
</template>
<script>
import { defineComponent, ref } from 'vue'
const columns = [{title: 'Name',dataIndex: 'name',customRender: function ({ text }) {return <span style="color: red;cursor: pointer;" onClick={changeNum}>{text}</span>}}, {title: 'Age',dataIndex: 'age'}, {title: 'Address',dataIndex: 'address'}
]
const num = ref(0)
const changeNum = () => {num.value++
}
const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park'
}, {key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park'
}, {key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park'
}, {key: '4',name: 'Ben Kang',age: 15,address: 'Sidney No. 1 Lake Park'
}]
export default defineComponent({setup () {return {data,columns,num,changeNum}}})
</script>

效果如下

ts语法

<template><div>{{num}}</div><a-tableclass="ant-table-striped"size="middle":columns="columns":data-source="data":row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"/>
</template>
<script lang="ts">
import { ref, defineComponent, h, VNode } from 'vue'const columns = [{title: 'Name',dataIndex: 'name',customRender: function ({ text }):VNode {return h('div', {style: {color: 'red',cursor: 'pointer'},class: 'name',onClick: changeNum}, text)}},{ title: 'Age', dataIndex: 'age' },{ title: 'Address', dataIndex: 'address' }
]
const num = ref(0)
const changeNum = () => {num.value++
}const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park'},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park'},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park'},{key: '4',name: 'Ben Kang',age: 15,address: 'Sidney No. 1 Lake Park'}
]export default defineComponent({setup () {return {data,columns,num,changeNum}}
})
</script>

效果如下图

vue antd table customRender 自定义标签相关推荐

vue使用render函数自定义标签动态导入js文件
文章目录问题背景解决思路知识加油站 Render函数 createElement参数代码实现问题背景项目中需要引入国网思极地图,但是因为pc端的项目一般都是部署到内网.该项目要同时部署到2 ...
vue element-ui table表格自定义纵向合计横向合计
1表格横向数据合计表格代码 <el-table-column prop="" label="合计"><template slot-scope ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
vue css自定义标签,Vue如何使用CSS自定义变量
目录在 css 自定义变量的功能以及出来许久了,但实际开发中大家使用并不多.归其原因是因为 less.sass 等预处理器已经拥有定义变量的功能,以及Vue.react很方便设置 style 样式, ...
react和vue中自定义标签的原理在这里
文章目录前言一.自定义元素是什么 1 乱写的标签二.使用步骤 1 自定义标签 2 添加web组件内容 3结合template模板标签使用 4 自定义元素的生命周期方法三, 反射自定义属性总结 ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
antd table横向滚动条样式自定义
总结了一份在工作中常用的antd table 滚动条样式优化的代码原样式: 优化后样式: :global { //修改框架样式关键字//表格头标题的滚动条设置// 为什么设置标题头滚动条呢,因为a ...
前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
前端导出 excel 的需求很多,但市面上好用的库并不多,讲明白复杂使用场景的文章更少. 本文将以文字 + demo 源码的形式,力求讲清楚满足 99% 使用场景的终极 excel 导出方案. 如果项 ...
自定义标签（转载）
转自:http://www.cnblogs.com/zhaoyang/archive/2011/12/25/2301108.html JSP自定义标签开发入门 JSP自定义标签开发入门一般情况下开发 ...

vue antd table customRender 自定义标签

vue2x+antd1x

columns 参数必须放到data里面进行声明否则失效

vue3x+antd3x

js写法

ts语法

vue antd table customRender 自定义标签相关推荐

最新文章

热门文章