web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用

1、el-table如果我们想新增一个勾选框，在 .vue文件中

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

如果不需要加这个勾选框，直接不写上面那行代码即可

<template><div class="app-container"><!--@selection-change="handleSelectionChange"> table的选择项改变触发事件 --><el-table v-loading="loading" :data="userList"> <!--@selection-change="handleSelectionChange">-->//勾选框<!--<el-table-column type="selection" width="55" align="center" />--><el-table-column label="用户名" align="center" prop="user.userNameCn" /><el-table-column label="时间" align="center" prop="begintime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.begintime, '{y}-{m}-{d} {HH}:{mm}:{ss}') }}</span></template></el-table-column></div>
</template>

2、设置勾选框默认勾选、禁用

 <el-table ref="table":data="tableData"stripeborder@select="selectSingle"           <!--单独勾选某行数据的勾选框-->@select-all="selectAll"          <!--勾选头部勾选框，进行全选或者全不选-->><el-table-columntype="selection"fixedwidth="50"align="center":selectable="selectable"         <!--设置禁用或非禁用状态-->>
</el-table>

单选，全选事件响应

methods:{//一、获取列表数据storageList(){serviceApi.storageList({}).then(res => {if(res.data.successFlg && res.data.data){//1、获取列表数据，存入tableDatathis.tableData = res.data.data ? res.data.data : [];//2、筛选出remark为“1”的数据，该数据勾选状态需要设置为勾选且禁用if(this.tableData.length > 0){let checkedData = this.tableData.filter((item) => {return item.remark === '1';});let $this = this;//3、一定要使用this.$nextTick()，等数据都渲染到表格中再设置勾选状态，否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果this.$nextTick(() => {if(checkedData.length > 0){checkedData.forEach((item) => {//toggleRowSelection(row, selected)方法接受两个参数，row传递被勾选行的数据，selected设置是否选中$this.$refs.table.toggleRowSelection(item，true);});}});}}}).catch(err => {console.error(err);});},//二、单独勾选表格中某条数据所对应的勾选框selectSingle(selection,row){let data = {remark:'1',id:row.id};serviceApi.saveMediaStorageSpace(data).then(res => {if(res.data.successFlg && res.data.data){this.$message.success('成功');this.storageList();//列表数据刷新}else{this.$message.error('失败');}}).catch(err => {console.error(err);});},//三、勾选头部的勾选框，进行全选selectAll(selection){if(selection.length > 0){//length>0表示全选，length=0为全不选selection.forEach((item) => {let data = {remark:1,id:item.id};serviceApi.saveMediaStorageSpace(data).then(res => {if(res.data.successFlg && res.data.data){this.$message.success('成功');this.storageList();//列表数据刷新}else{this.$message.error('失败');}}).catch(err => {console.error(err);});});}},//四、设置表格中勾选框是否是禁用状态selectable(row,index){if(row.remark === '1'){return false;//禁用状态}else{return true;//非禁用状态}},}

1、如果是表格中一开始没有数据，需要通过请求接口获取数据或者从其他途径获取数据的话，
那么一定要记得再获取完数据之后使用this.nextTick( ) ，在 this.nextTick()，在this.nextTick()，在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态
2、如果是静态数据的话，则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态，如下：

export default {name:'app',data(){return {tableData:[{name:'c',romTotal:22},{name:'d',romTotal:11},{name:'f',romTotal:33}       ],//  表格数据tableHeader:[ //表格头部{label: '表头1',width: '150',},{label: '表头2',width: '150',}],}},mounted(){this.$refs.table.toggleRowSelection(tableData[0],true);}
}

web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
web前端-vue element UI el-table，el-table-column表格添加行点击事件
el-table如下数据一.el-table 整行都可以点击事件定义点击事件 @row-click="openDetails":openDetails为方法名 <!-- ...
Web前端笔记-element ui中table中禁止换行，使用...进行省略
效果是这样的: 这里就记录下操作添加一个CSS如下: a.TestCSS{-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-w ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
vue+Element ui中使用 upload实现Excel文件上传
文章目录业务需求: 实现方式: 具体步骤: 1.引入组件: 2.data中定义: 3.methods中方法: 业务需求: 批量导入Excel文件实现方式: 使用组件upload 具体步骤: 1.引 ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用

web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用相关推荐

最新文章

热门文章

web前端-Vue element UI中的el-table勾选框 展示隐藏；设置默认勾选、禁用

web前端-Vue element UI中的el-table勾选框 展示隐藏；设置默认勾选、禁用相关推荐

最新文章

热门文章

web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用

web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用相关推荐