备案控制台
开发者社区 开发与运维 文章 正文

ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男

2024-04-19 20
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男

使用方式

找到需要添加插槽的列，例如我想给性别这一列添加插槽，当text=0的时候显示男，当text=1的时候显示女，否则就显示未知

这是原代码

{
  title: '性别',
  align: 'center',
  dataIndex: 'sex',
},

·把下面的这段代码添加进去

customRender: function (text) {
  return text == 0 ? '男' : text == 1 ? '女' : '未知'
  },

完整的代码如下

{
  title: '性别',
  align: 'center',
  dataIndex: 'sex',
},
customRender: function (text) {
  return text == 0 ? '男' : text == 1 ? '女' : '未知'
  },

这是基本的使用方式，后期会分享一些复杂的实现方式！

文章标签：
JavaScript
关键词：
vue VUE.js
vue列表VUE.js
列表VUE.js
vue插槽VUE.js
插槽VUE.js
xiaohua616
目录
相关文章
众所周知
|
1天前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表，如遍历数组生成`<li>`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表，如遍历数组生成`<li>`元素。基本语法是`v-for="(item, index) in items"`，支持遍历对象的键值对。注意与`v-if`同用时应使用`<template>`，组件上使用`v-for`需设`key`属性以优化性能。
众所周知
9 2
众所周知
|
1天前
|
JavaScript
Vue.js中的`v-model`指令是Vue框架用于实现双向数据绑定的一种核心机制，特别是在表单元素中。
【6月更文挑战第25天】
众所周知
6 1
米诺斯
|
1天前
|
JavaScript 定位技术
BIGEMAP地图VUE中引入
BIGEMAP地图VUE中引入
米诺斯
3 0
BIGEMAP地图VUE中引入
米诺斯
|
1天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
米诺斯
6 0
米诺斯
|
1天前
|
JavaScript 定位技术 开发者
vue项目使用腾讯地图获取定位
vue项目使用腾讯地图获取定位
米诺斯
4 0
凌浩雨
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
凌浩雨
1004 0
weixin_836869520
|
5天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
weixin_836869520
12 0
修己xj
|
10天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构，还集成了常用的开发工具和配置，使得开发者可以专注于业务逻辑的实现，而不需要花费大量时间在项目配置上。
修己xj
71 7
使用 Vue CLI 脚手架生成 Vue 项目
米诺斯
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
米诺斯
12 6
米诺斯
|
1天前
|
JavaScript
Vue的小知识点
Vue的小知识点
米诺斯
7 2

热门文章

最新文章

  • 1
    Vue+Django+MySQL搭建指南（个人全栈快速开发）
  • 2
    【超详细！】vue+koa+nginx前后端分离开发项目上线部署到云服务器
  • 3
    vue使用video.js解决m3u8视频播放格式
  • 4
    基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目（附源码）
  • 5
    Vue3 项目防止按钮重复点击（重复请求接口）
  • 6
    Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案
  • 7
    Vue3的新特性
  • 8
    互联网+AI+智慧工地管理平台源码（Spring Cloud +Vue）
  • 9
    Vue 项目 API 接口封装1
  • 10
    Vue躬行记（5）——组件通信
  • 1
    在vue中，怎样理解 Vue 的单向数据流？
    36
  • 2
    在vue中，Class 与 Style 如何动态绑定？
    22
  • 3
    在vue中，v-show 与 v-if 有什么区别？
    28
  • 4
    在vue中，如何实现SPA单页面应用的路由管理？
    33
  • 5
    在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
    58
  • 6
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    117
  • 7
    Vue中el与data的两种写法
    22
  • 8
    Vue之数据绑定
    20
  • 9
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    65
  • 10
    初识Vue 输出Hello World 及注意事项
    30

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）