首页 > 其他分享 >vue3 elementplus table表格内添加checkbox和行号

vue3 elementplus table表格内添加checkbox和行号

时间:2023-10-25 11:57:46浏览次数:31  
标签:checkbox 复选框 行号 elementplus vue3 添加

1.仅添加复选框

<el-table-column type="selection" width="55"></el-table-column>

2.添加复选框和文字行号在一列

<el-table-column>
        <template #header>
          <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
        </template>
        <template #default="{$index}">
          <el-checkbox v-model="selectedRows"></el-checkbox>
          <span>{{$index+1}}</span>
        </template>
</el-table-column>

 

标签:checkbox,复选框,行号,elementplus,vue3,添加
From: https://www.cnblogs.com/junwuxiao/p/17786791.html

相关文章

  • vue3 动态加载组件
    <el-dropdownstyle="margin:0px"><el-buttontype="primary">视图</el-button><template#dropdown><el-dropdown-menu><el-dropdown-itemv-for="dropItemindropI......
  • 记录--vue3实现excel文件预览和打印
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在前端开发中,有时候一些业务场景中,我们有需求要去实现excel的预览和打印功能,本文在vue3中如何实现Excel文件的预览和打印。预览excel关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成......
  • Vue3中使用富文本编辑器
    在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能npm地址:https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/5.1.12?activeTab=readme官网:Editor 1.安装pnpmadd@wangeditor/editor#或者npminstall@wangeditor/editor--save......
  • vue3 和 element-plus 实现指定单元格编辑
    思路1.获取到指定单元格的位置2.通过状态来判断是否展示编辑步骤1.定义变量去确定行和列lettableRowEditId=ref(null),//控制可编辑的每一行lettableColumnEditIndex=ref(null),//控制可编辑的每一列2.在el-table上绑定单元格的点击事件cell-click(单击)cell......
  • vue3|知识点
    双向绑定Proxyproxy只支持对象ref创建的数据是空对象,绑定在其value属性上。监听属性监听对象watch(msg,func(new,old))监听对象的属性watch(()=>msg.name,func)watchEffect(func)自动监听已经引用的值......
  • 记录--vue3 + mark.js | 实现文字标注功能
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助页面效果具体实现新增1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。2、通过选中的文字长度是否大于0或window.getSelection().isCollapsed(返回一个布......
  • Vue3.0 中使用 wangEditor 富文本编辑器
    当使用Vue3.0版本时,wangEditor的使用方法略有不同。以下是在Vue3.0中使用wangEditor富文本编辑器的示例代码:```<template> <div>  <divref="editorContainer"></div>  <button@click="saveContent">保存</button> </div></template&......
  • Vue.js框架:vue3版本父子组件之间的传值和事件触发
    一、子组件使用vue3官方提供的setup语法糖中给出的defineEmits、defineProps来定义父子间的传参值和关联方法(useContext在3.2版本之后已去除)。<scriptsetuplang="ts">import{defineProps,defineEmits}from'vue'constemitEvents=defineEmits(['so......
  • npm安装datav-vue3(一个大屏边框和装饰组件)后报错Failed to resolve entry for packa
    原因:个人认为应该是npm上的版本比较低,因为弄好后装饰只能用到第8个,后面的都没有,查看package.json里它的版本为^0.0.0-test.1672506674342,也就是说还没有正式版,在官方的说明里也有体现---[目前还处于Alpha阶段,所有的API及Props都可能在后续迭代中发生变化]介绍|DataV......
  • Vue.js框架:vue3版本引入使用element-ui
    一、引入element-pluselement-ui只支持vue2,vue3需要引入element-plus进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。地址:https://element-plus.gitee.io/在vue3项目终端里使用以下命令引入该依赖:npminstallelement-plus--save二、修......