精华内容
下载资源
问答
  • jQuery css3点击按钮展开图标菜单动画代码 jQuery css3点击按钮展开图标菜单动画代码
  • <Table loading={loading} dataSource={resourceList} rowSelection={rowSelection} columns={this.state.ShowColumns} bordered rowKey={(record) =>...// 图标展开样式修改 expandIcon = (prop
    <Table
    	loading={loading}
    	dataSource={resourceList}
    	rowSelection={rowSelection}
    	columns={this.state.ShowColumns}
    	bordered
    	rowKey={(record) => record.id}
    	scroll={{ x: true }}
    	expandIcon = {this.expandIcon}
    />
    
    // 图标展开样式修改
    	expandIcon = (props) => {
    	    if (props.record.children && props.record.children.length > 0) {
    	      if (props.expanded) {
    	        return <a style={{ marginRight: 5 ,color: '#000'}} onClick={e => {
    	          props.onExpand(props.record, e);
    	        }}>
    	          <span style={{ fontSize: '10px', marginRight: '10px', color: '#000'}}>
    	            {/* <MyIcon type="icon-weimingming" /> */}
    	            <CaretDownOutlined />
    	          </span>
    			  <span style = {{margin:'0px 4px'}}><MyIcon type = {props.record.icon}/></span>
    			  <span>{props.record.name}</span>
    	        </ a>
    	      } else {
    	        return <a style={{ marginRight: 5 ,color: '#000'}} onClick={e => {
    	          props.onExpand(props.record, e);
    	        }}>
    	          <span style={{ fontSize: '10px', marginRight: '10px' }}>
    	            {/* <MyIcon type="icon-zanting3" /> */}
    	            <CaretRightOutlined />
    	          </span>
    	          	<span style = {{margin:'0px 4px'}}><MyIcon type = {props.record.icon}/></span>
    				<span>{props.record.name}</span>
    	        </ a>
    	      }
    	    } else {
    	      return (
    				<Fragment>
    					<span style={{ marginRight: '20px' }}></span>
    					<span style = {{margin:'0px 4px'}}><MyIcon type = {props.record.icon}/></span>
    					<span >{props.record.name}</span>
    				</Fragment>
    			)
    	    }
      	}
    
    展开全文
  • 1 a-table自定义展开图标 需求是展开图标换成这个样子 可以利用a-table的expandIcon属性 具体使用如下 <a-table v-if="isRouterAlive" style="margin-top:20px" :columns="columns" :data-source=...

    1 a-table自定义展开图标

        

    需求是展开图标换成这个样子

    可以利用a-table的  expandIcon 属性

    具体使用如下

     <a-table
            v-if="isRouterAlive"
            style="margin-top:20px"
            :columns="columns"
            :data-source="matterList"
            :expandIcon="customExpandIcon"
            :expandedRowKeys="expandedRowKeys"
            :defaultExpandedRowKeys="defaultExpandedRowKeys"
            @expand="fatherExpand"
            :indentSize="16"  
      />
    
    <script>
    import IconCaretRight from '@ant-design/icons/svg/outline/caret-right.svg?inline'
    import IconCaretDown from '@ant-design/icons/svg/outline/caret-down.svg?inline'
    export default {
      data () {
        return {
          expandedRowKeys: [],
          defaultExpandedRowKeys: [],
          // 这是table数据
          matterList: [],
          columns: []
        }
      },
      methods: {
         // 树节点展开方法 点击展开图标时的方法
        // 利用es7的async await 可以等数据请求回来之后 进行后续流程,否则就会出现点击两次数据才显示
        async fatherExpand (expanded, record) {
          if (expanded) {
            await this.getChild(record)
            this.expandedRowKeys.push(record.iid)
          } else {
            this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
          }
        },
     // 栏目树获取子节点数据
        // 把获取来的数据放到 record的children里点击展开图标就会有数据显示了
        getChild (record) {
          return new Promise(resolve => {
            evnetSort({ pid: record.iid }).then(res => {
              // table默认带树表格,如果使用children作参数名则会出现两个表格
              if (res.success) {
                res.data.matterEntities.map(item => {
                  item.children = []
                })
                record.children = res.data.matterEntities
                if (record.children === null || record.children.length === 0) {
                  record.hasChild = false
                  this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
                }
                resolve()
              }
            })
          })
        },
    customExpandIcon (props) {
          // 是否有子项,无子项不展示图标
          // record是每行的数据,后端返回的数据会有一个hasChild字段判断是否有子项
          if (props.record && props.record.hasChild) {
            // props.expanded a-table组件判断是否展开了为true是展开,false为没展开
            if (props.expanded) {
              // onClick事件必须添加上,相当于把a-table里的展开事件给了自定义的图标,不加的话点击会失效
              return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
                {IconCaretDown} onClick={e => { props.onExpand(props.record, e) }} />
            } else {
              return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
                {IconCaretRight} onClick={(e) => { props.onExpand(props.record, e) }} />
            }
          } else {
            return <span style="padding-left: 21px;" />
          }
        },
      }
    
    }
    </script>

    展开全文
  • 替换element表格的展开图标

    千次阅读 2020-09-15 13:57:25
    找到需要替换的节点 现在需要将箭头替换为其他icon... // 将el-table的展开图标替换为其他图标 .el-table__expand-icon{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } .el-table__expand-icon

    找到需要替换的节点

    在这里插入图片描述
    现在需要将箭头替换为其他icon(element的icon都可以),在F12下找到相应节点:

    在这里插入图片描述
    可以看到content中的就是箭头icon,现在只需要在css中直接覆盖这个就行了。

    替换css

     // 将el-table的展开图标替换为其他图标
      .el-table__expand-icon{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      .el-table__expand-icon 
      .el-icon-arrow-right:before{
        content: "\e6d9";
        border: 1px solid #ccc;
        padding: 2px;
      }
    
      .el-table__expand-icon--expanded
      .el-icon-arrow-right:before{
        content: "\e6d8";
      }
    

    此处是将箭头替换为el-icon中的加减图标,当然加了一点边框修饰,这点不重要。
    替换效果如下:
    在这里插入图片描述
    其中最上面的css是为了设置展开或者收起时,不发生旋转。

    展开全文
  • 1.iconfont icon-shousuo和iconfont icon-list-collapse图标自行替换 <el-table-column prop="name" label="序号"> <template slot-scope="scope"> <span @click="handleIconToggle(scope.row)" ...

    1.iconfont icon-shousuo和iconfont icon-list-collapse图标自行替换

    <el-table-column prop="name" label="序号">
    	<template slot-scope="scope">
    		<span @click="handleIconToggle(scope.row)" style="cursor: pointer">
    			<i :ref="'myicon'+scope.row.id" class="iconfont icon-list-collapse" v-show="scope.row.children != null && scope.row.children.length != 0"></i>
    			{{ scope.$index + 1 }}
    		</span>
    	</template>
    </el-table-column>
    

    2.切换方法

    //点击table展开收起
    handleIconToggle(row) {
        this.$refs.topicTable.toggleRowExpansion(row);
        if(this.$refs['myicon'+row.id].getAttribute('class') == 'iconfont icon-list-collapse'){
            this.$refs['myicon'+row.id].setAttribute('class','iconfont icon-shousuo')
        }else{
            this.$refs['myicon'+row.id].setAttribute('class','iconfont icon-list-collapse')
        }
    },
    

    3.隐藏之前的箭头样式

    <style>
    /* my_table 是table的className */
    .my_table
        .el-table__body-wrapper
        .el-table__body
        tr
        > td
        .cell
        .el-table__expand-icon {
        display: none !important;
    }
    </style>
    

    4.效果图
    效果图

    展开全文
  • 一款风格时尚的jQuery圆形动画展开图标菜单代码,菜单收拢时只显示一个小按钮图标,当点击按钮时,菜单项即可展开并显示在小按钮四周的圆环上,每一个菜单项也是一个简易时尚的小图标,非常的好看也很实用。
  • NULL 博文链接:https://tcspecial.iteye.com/blog/1955430
  • methods里定义 expandIcon 方法 // table的expandIcon属性,修改默认展开关闭按钮 子表无数据时不显示展开图标 expandIcon(props){ if (!validatenull(props.record.numericalConditionVos)){ if(props.record....
  • 一款风格时尚的jQuery圆形动画展开图标菜单代码,菜单收拢时只显示一个小按钮图标,当点击按钮时,菜单项即可展开并显示在小按钮四周的圆环上,每一个菜单项也是一个简易时尚的小图标,非常的好看也很实用。
  • 关于antd的Table组件的expandedRowKeys 设置后点击展开图标无法展开的问题 在做项目的时候,想做这样一个效果:点击修改后,可以展开额外行进行修改,所以一开始的想法是动态传递一个需要展开的行的key值,但是设置...
  • CSS3左侧展开收缩图标菜单特效,默认收缩起来只显示图标,当鼠标进入菜单区域滑动展开显示菜单名称,通常用作网站后台菜单栏。
  • 非常精美的一款CSS3图标菜单下拉展开收缩切换特效,展开时还有弹性动画效果,纯CSS3实现,不含任何js代码。
  • if (props.record.fileInfoList.length > 0) { if (props.expanded) {//有数据-展开时候图标 return ( ,margin-right:0px" onClick={(e) => { props.onExpand(props.record, e); }} > <a-icon type="down" />{" "} ...
  • 子表无数据时不显示展开图标 expandIcon(props){ if (!validatenull(props.record.numericalConditionVos)){ if(props.record.numericalConditionVos.length > 0){ if (props.expanded) { return { props.onExpand...
  • 1、需求: 实现点击展开图标获取后台数据,将其渲染到表格中,没有分页; 效果图如下: 具体实现 这里有两个问题我做起来比较费劲,花了大半个下午的时间才找到解决问题的方法,一个就是点击展开图标的方法是哪个...
  • 动态加载jstree,只列出第一级父节点,无子节点,此时状态如下(无展开图标):我们继续往下看:如上图所示,其实jstree的展开图标是一直存在的,只是通过右边的background-position来控制显示的样式(是展开图标,...
  • JTree 方法设置树节点的展开图标

    千次阅读 2016-04-04 10:40:16
    JTree 方法设置树节点的展开图标
  • /*-------------------------jquery代码----------------------------*/ $(document).ready(function(){ $(".tabs1").show(); $(".tabs").hide(); ... ...
  • 主要介绍了Easyui Treegrid改变默认图标的方法的相关资料,需要的朋友可以参考下
  • 1、如果要在节点前显示展开、收起的图标,在节点中必须要有一个“children”属性,且必须是小写,大写的不识别,如果没有这个属性会默认为末级节点 2、“state”属性控制节点的展开、关闭默认状态 3、加载根节点的...
  • 应UI小姐姐的需求,要把element-ui表格组件里的展开图标换得美观一点!效果如下: BERORE: AFTER: 1.添加css隐藏原有箭头图标: .el-table__expand-column .cell { display: none; } 2.引入自定义图标 ...
  • 树形菜单栏图标(png),树形菜单栏图标(png),内附下载地址。
  • // 将el-table的展开图标替换为其他图标 // 设置展开或者收起时,不发生旋转 .el-table__expand-icon{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } .el-table__expand-icon .el-icon-...
  • 在使用element-ui的展开表格时,遇到一个这样的需求,希望展开的时候,图标是-, 收起的时候,图标是+。 在网上找了很多方法,说是自定义一个按钮通过js事件来控制,但我这里逻辑没有那么复杂,只是样式需要调整,...
  • 前边不显示+,并且详细信息默认展开 在table中配置 (item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开所有...
  • css动画,展开折叠图标

    千次阅读 2018-11-02 09:54:00
    @keyframes packupArrowFlow { 0% { bottom: 0; } 70% { bottom: 10px; } } @-webkit-keyframes packupArrowFlow { 0% { bottom: 0; } 70% { ...
  • 问题描述: ant design tree树形列表,第一次展开正常,二次点击后,展开按钮没了 这是初次点开 第二次点开,01前面的图标没了,这个节点就无法展开 原因分析: 猜测与组件渲染有关 解决方案: 强行重新渲染a-tree...
  • 树节点中的图标 官网文档中介绍了,可以通过renderContent来设置,那折叠和展开图标小三角怎么修改成想用的其他图标呢。 我现在是需要改成 在浏览器中查看元素可知 嗯,覆盖图标原来的content内容。 .el-tree-...
  • antd design pro修改tree展开/折叠图标

    千次阅读 2021-03-02 15:38:57
    .less文件 :global{ .ant-tree-switcher_... } } .js文件引用less,该页面所有的Tree的图标都改了 import styles from './**.css'; Tree的子组件TreeNode加上 switcherIcon={() => null},去掉Tree的默认图标 null} />

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,492
精华内容 23,396
关键字:

展开图标