vue3 + antdv table 展开行 expandedRowRender 根据判断条件动态显隐展开行的 icon

BasicTable 是我们项目自定义封装了一下 antdv 的t able 不需要太关注,注意看expandIcon的用法即可

<BasicTable :expandIcon="expandIcon" @register="registerTable">
   <template #expandedRowRender="{ record }">
     <ExpandRows :parent-id="record.id" />
   </template>
 </BasicTable>
function expandIcon(props) {
  // 不需要展开时,return个空即可
  if (props.record.segmentedNot === 0) return h('a', {}, '');
  
  // props.expanded当前行状态 展开为true,收起为false.
  if (props.expanded) {
    //有数据-展开时候图标
    return h(
      'a',
      {
        class: 'text-lg',
        onClick: (e) => {
          props.onExpand(props.record, e);
        },
      },
      '-',
    );
  } else {
    //有数据-未展开时候图标
    return h(
      'a',
      {
        class: 'text-lg',
        onClick: (e) => {
          props.onExpand(props.record, e);
        },
      },
      '+',
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下步骤来实现Vue3+AntdV+JavaScript的身份证正反面上传功能: 1. 首先,确保你已经安装了Vue3和AntdV,并且已经创建了一个Vue项目。 2. 在你的Vue组件中,引入AntdV的Upload组件和Button组件: ```javascript <template> <div> <a-upload :before-upload="beforeUpload" :show-upload-list="false"> <a-button>选择图片</a-button> </a-upload> </div> </template> <script> import { ref } from 'vue'; export default { setup() { // 创建一个ref来保存上传的图片 const image = ref(''); // 在上传之前的钩子函数中处理文件 const beforeUpload = (file) => { // 使用FileReader读取文件内容 const reader = new FileReader(); reader.onload = (e) => { // 将读取的文件内容赋值给image image.value = e.target.result; }; // 读取文件内容 reader.readAsDataURL(file); // 返回false,阻止默认的上传为 return false; }; return { beforeUpload, image, }; }, }; </script> ``` 3. 在上面的代码中,我们使用了Vue的`ref`函数来创建一个响应式的数据`image`,用来保存上传的图片。 4. 在`beforeUpload`钩子函数中,我们使用`FileReader`来读取上传的文件内容,并将其赋值给`image`。最后,我们返回`false`来阻止默认的上传为。 5. 在模板中,我们使用AntdV的`Upload`组件来实现文件上传,并使用`before-upload`属性来绑定`beforeUpload`钩子函数。 6. 最后,你可以根据需要在组件中使用`image`来显示上传的图片。 这样,你就可以实现Vue3+AntdV+JavaScript的身份证正反面上传功能了。记得根据你的实际需求做相应的调整和样式美化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值