针对于vue3的类似性别code值替换,默认选中 基于arco.design

19 篇文章 2 订阅
 <template #columns>
            <a-table-column
              v-for="item of tableColumns"
              :key="item.key"
              :align="item.align"
              :title="item.title"
              :width="item.width"
              :data-index="item.key"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'channelType'" #cell="{ record }">
                {{ record.status === 'PERSON' ? '个人' : '企业' }}
              </template>
              <template v-if="item.key === 'status'"  #cell="{ record }">
                {{ record.status === 'NORMAL' ? '正常' : '停止' }}
              </template>
            </a-table-column>
   </template>

多种选择( model-value="ENTERPRISE" 默认选中):

 <template #columns>
            <a-table-column
              v-for="item of tableColumns"
              :key="item.key"
              :align="item.align"
              :title="item.title"
              :width="item.width"
              :data-index="item.key"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'channelType'" #cell="{ record }"  model-value="ENTERPRISE">
                <!-- {{ record.channelType === 'PERSON' ? '企业' : '个人' }} -->
                <template v-if="record.channelType === 'PERSON'">个人</template>
                <template v-if="record.channelType === 'ENTERPRISE'">企业</template>
              </template>
              <template v-if="item.key === 'status'" #cell="{ record }">
                <template v-if="record.status === 'NORMAL'">正常</template>
                <template v-if="record.status === 'STOP'">停止</template>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要将vue3右键菜单组件固定在arco.design表格内部,可以使用以下步骤: 1. 首先,在arco.design表格的外层包裹一个相对定位的 div 元素,这个 div 元素的高度和宽度要与表格相同。 2. 在这个 div 元素内部添加一个绝对定位的 div 元素,这个 div 元素的高度和宽度也要与表格相同。 3. 在这个绝对定位的 div 元素内部添加右键菜单组件。 4. 为这个绝对定位的 div 元素添加一个事件监听器,当鼠标右键点击时,显示右键菜单组件。 5. 在右键菜单组件的样式中,设置 position: fixed,这样右键菜单组件就可以固定在表格内部。 下面是一个示例代码: ```html <template> <div class="table-container"> <div class="table-wrapper"> <a-table> <!-- 表格内容 --> </a-table> <div class="context-menu" v-show="showMenu" @click="handleMenuClick"> <!-- 右键菜单内容 --> </div> </div> </div> </template> <script> export default { data() { return { showMenu: false, menuX: 0, menuY: 0 }; }, mounted() { document.addEventListener("contextmenu", this.handleContextMenu); document.addEventListener("click", this.handleMenuClose); }, beforeUnmount() { document.removeEventListener("contextmenu", this.handleContextMenu); document.removeEventListener("click", this.handleMenuClose); }, methods: { handleContextMenu(e) { e.preventDefault(); this.menuX = e.clientX; this.menuY = e.clientY; this.showMenu = true; }, handleMenuClose() { this.showMenu = false; }, handleMenuClick() { // 处理右键菜单的点击事件 } } }; </script> <style> .table-container { position: relative; height: 400px; /* 表格高度 */ width: 100%; /* 表格宽度 */ } .table-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .context-menu { position: fixed; top: 0; left: 0; z-index: 999; /* 右键菜单的样式 */ } </style> ``` 在这个示例中,我们使用了一个外层的相对定位的 div 元素来包裹arco.design表格,然后在这个 div 元素内部添加了一个绝对定位的 div 元素,将右键菜单组件放在这个 div 元素内部。在右键菜单组件的样式中,设置了 position: fixed,这样右键菜单组件就可以固定在表格内部了。我们还为这个绝对定位的 div 元素添加了一个事件监听器,当鼠标右键点击时,显示右键菜单组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

庞胖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值