首页 > 其他分享 >antd插槽的使用 teble sole

antd插槽的使用 teble sole

时间:2022-09-23 09:45:40浏览次数:55  
标签:obj teble level 插槽 sole dataIndex customRender antd warningLevel

其实现在了解的也不是特别的清楚
插槽模板在上面 这里只写了其中一个

<template slot="warningLevel" slot-scope="warningLevel">
          <span :class="setFontColor(warningLevel.level)">{{
            warningLevel.level
          }}</span>
          <!-- 模板里面直接加样式加不上去 -->
        </template>

上面slot="warningLevel"和下面的scopedSlots: { customRender: "warningLevel" },是对应起来的,根据这个确定位置

上面slot-scope="warningLevel"是放内容的地方,通过{{warningLevel.level}}把内容输出,我这里另外加了一个span的原因是直接在插槽里面加加不上去

如果下面的dataIndex: "level",没有注释,上面的内容输出直接写{{warningLevel}}就可以了
表单在下面

const columns = [
  {
    title: "预警等级",
    key: "level",
    // dataIndex: "level",
    scopedSlots: { customRender: "warningLevel" },
    align: "center",
    width: "6%",
    ellipsis: true,
  },
  {
    title: "预警",
    key: "content",
    dataIndex: "content",
    // align: "center",
    customRender: (value) => {
      const obj = {
        children: value,
        ali: {},
      };
      obj.ali.align = "left";
      return obj;
    },
  },
];

标签:obj,teble,level,插槽,sole,dataIndex,customRender,antd,warningLevel
From: https://www.cnblogs.com/zongkm/p/16715374.html

相关文章

  • Antd Tree,实现排序拖动,父子层级内外拖动
    拖动属性dropToGap,dropPosition属性解释:dropToGap:boolean类型,true代表拖拽到节点之间的缝隙中,false代表拖拽到节点上,即节点的内容区。dropPosition:拖拽的时候,针对一......
  • console调试技巧
    console.group在Web控制台上创建一个新的分组。随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束.Con......
  • 删除Console密码
    场景:当telnet、ssh等方式无法管理设备且console口密码被忘记时。华为设备清除方法盒式V100R002/V100R003删除Console密码重启交换机,进入BootRoM菜单后,选择5.Enterfil......
  • react-antd组件之Steps组件自定义icon svg图片颜色跟随完成进度改变
    demo.svg<?xmlversion="1.0"encoding="UTF-8"?><svgwidth="58px"height="44px"viewBox="005844"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xli......
  • antdV2.2.8版本,组件a-upload 文件上传 uploading只触发一次
    antd的a-upload组件,再上传文件时,有三个状态uploadingdoneerror但是,在上传时,一直在uploading状态,即使文件已经上传成功了,uploading状态还不切换到done状态。解决办法......
  • H3C 交换机重置console密码
    屋漏偏逢连夜雨、船迟又遇打头风,今天刚巧来机房调试网络,发现N年前的一台H3C交换机console口密码忘球了,这下脑子嗡嗡响,这可咋办嘞,总不能让业务这样等待下去吧,说干就干,谁让咱......
  • 去掉打包之后的console.log
    下载插件: npmibabel-plugin-transform-remove-console--save-dev在babel.config.js文件中添加: constprodPlugins=[]if(process.env.NODE_ENV==='produc......
  • React + Dva + Antd + Umi 快速入门
     最近一个项目用了React+Dva+Antd+Umi 技术栈 基础框架概念React前端三大框架之一。Dva由阿里架构师sorrycc带领team完成的一套前端框架,在作者的github......
  • webpack css-loader模块化导致的antd样式不好用解决方案
    css-loader模块化会导致antd样式文件无效,解决的方式就是排除node_modules下的目标文件就可以如果你用的less就可以按以下方式来配置{test:/\.less$/,inclu......
  • Antd之No Data转换为中文
    Antd默认的暂无数据是英文的,如下图表格所示。修改的方法为:使用a-config-provider1.在App.vue增加a-config-provider,包装显示的页面<template><a-config-provider......