-
2022-06-17 11:41:58
<el-table ref="refsTable" v-loading="loading" :data="safeList" style="width: 100%;" border class="elTable" @selection-change="handleSelectionChange" :header-cell-style="getRowClass" :cell-style="rowClass"> <el-table-column type="selection" width="55" align="center" prop="lineId" /> <el-table-column label="飞行航线" align="center" prop="lineName" :show-overflow-tooltip="true" /> <el-table-column label="任务编号" align="center" prop="taskNumber" :show-overflow-tooltip="true" /> <el-table-column label="任务开始时间" width="160" align="center" prop="beginTime" :show-overflow-tooltip="true" /> <el-table-column label="任务结束时间" width="160" align="center" prop="endTime" :show-overflow-tooltip="true" /> <el-table-column label="图片数量" width="120" align="center" prop="totalImgNum" /> <el-table-column label="未带安全帽数" width="130" align="center" prop="handleImgNum" /> </el-table> <div class="pagin"> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> </div> // 复选框多选框选中数据 handleSelectionChange(selection) { this.checkedLine = selection[0].lineId; if (selection.length > 1) { this.$refs.refsTable.clearSelection(); this.$refs.refsTable.toggleRowSelection(selection.pop()); } }
更多相关内容 -
elementUi表格复选框变为单选的方法
2021-08-03 21:56:01elementUi表格复选框变为单选的方法 其中row为return中定义的一个变量 tableDom为表格ref指定的变量(我是这么叫的…) 其实还有这个方法还有更好的方式,但我懒得研究了。。。。 对了,这个是单击行选中的方式 ...elementUi表格复选框变为单选的方法
其中row为return中定义的一个变量
tableDom为表格ref指定的变量(我是这么叫的…)
其实还有这个方法还有更好的方式,但我懒得研究了。。。。
对了,这个是单击行选中的方式handleClickTableRow(row) { this.$refs.tableDom.clearSelection(); if (this.row === '') { this.$refs.tableDom.toggleRowSelection(row, true); } else { if (this.row === row) { this.$refs.tableDom.toggleRowSelection(row, false); row = '' } else { this.$refs.tableDom.toggleRowSelection(row, true); } } this.row = row if (this.row !== '') { this.$message({ type: 'success', message: JSON.stringify(this.row) }); } else { this.$message({ type: 'success', message: JSON.stringify([]) }); } }
-
VUE+Elementui实现复选框的多选与全选
2022-03-01 16:22:01<template> <el-table :data="tableData" class="permissionstable" height="267px" :show-header="false" style="width: 26%; border: 1px solid #dfe6ec; margin: 0 auto;... &...<template> <el-table :data="tableData" class="permissionstable" height="267px" :show-header="false" style="width: 26%; border: 1px solid #dfe6ec; margin: 0 auto; top: 25%" :default-expand-all="true" > <el-table-column type="expand" width="35px"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item> <el-checkbox-group v-model="props.row.resourceNameList" class="resourceCheckClass" > <el-checkbox v-for="(item, index) in props.row.children" :key="index" :value="item.resourceId" :label="item.resourceId" name="type" @change="resourceCheckItem(props.row, props.row.children)" style="width: 100px" :disabled="props.row.chargingEventsDisabled" >{{ item.resourceName }}</el-checkbox > </el-checkbox-group> </el-form-item> </el-form> </template> </el-table-column> <el-table-column width="25"> <template slot-scope="props"> <el-checkbox :indeterminate="props.row.isIndeterminate" v-model="props.row.checkAll" @change="handleSelectionChange(props.row, props.row.children)" :disabled="props.row.chargingEventsDisabled" >全选</el-checkbox > </template> </el-table-column> <el-table-column label="resourceName" prop="resourceName" width="80"> </el-table-column> <el-table-column> <template slot-scope="props" width="35"> <div :style="{ display: props.row.chargingEventsDisabled ? 'block' : 'none', }" style="color: red" > *此模块无权限 </div> </template> </el-table-column> </el-table> </template> <style> .el-form--inline .el-form-item { margin-left: 45px; } /* 滚动条 */ ::-webkit-scrollbar { width: 5px; height: 6px; } ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:vertical { display: none; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track:vertical { border-radius: 10px; background-color: black; } ::-webkit-scrollbar-track-piece { background-color: #dce7f0; border-radius: 3px; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:vertical { border-radius: 10px; background-color: #1890ff; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:vertical:hover { background: #1890ff; } </style> <script> import _ from "lodash"; export default { data() { return { // 需要展示的数据 tableData: [], // 后台返回的数据 tableData2: [ { resourceId: "0", resourceName: "用户管理", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "删除", isSelected: "0", }, { resourceId: "04", resourceName: "确认", isSelected: "0", }, { resourceId: "05", resourceName: "结束", isSelected: "0", }, { resourceId: "06", resourceName: "导出", isSelected: "0", }, { resourceId: "07", resourceName: "导入", isSelected: "0", }, { resourceId: "08", resourceName: "归档", isSelected: "0", }, ], }, { resourceId: "1", resourceName: "收费事件", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "删除", isSelected: "0", }, { resourceId: "04", resourceName: "确认", isSelected: "0", }, { resourceId: "05", resourceName: "结束", isSelected: "0", }, { resourceId: "06", resourceName: "导出", isSelected: "0", }, { resourceId: "07", resourceName: "导入", isSelected: "0", }, { resourceId: "08", resourceName: "归档", isSelected: "0", }, ], }, { resourceId: "3", resourceName: "事件管理", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "删除", isSelected: "0", }, { resourceId: "04", resourceName: "确认", isSelected: "0", }, { resourceId: "05", resourceName: "结束", isSelected: "0", }, { resourceId: "06", resourceName: "导出", isSelected: "0", }, { resourceId: "07", resourceName: "导入", isSelected: "0", }, { resourceId: "08", resourceName: "归档", isSelected: "0", }, ], }, { resourceId: "4", resourceName: "角色管理", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "删除", isSelected: "0", }, { resourceId: "04", resourceName: "确认", isSelected: "0", }, { resourceId: "05", resourceName: "结束", isSelected: "0", }, { resourceId: "06", resourceName: "导出", isSelected: "0", }, { resourceId: "07", resourceName: "导入", isSelected: "0", }, { resourceId: "08", resourceName: "归档", isSelected: "0", }, ], }, ], }; }, created() {}, mounted() { this.getTableData(); }, methods: { // 获取表格数据 getTableData() { // 实际开发中,在这里会请求后台数据,得到tableData2这个数组, // _.cloneDeep是为了深度克隆tableData2,以免之后的操作影响到原数组 let tableData = _.cloneDeep(this.tableData2); tableData.forEach((item) => { if (item.children && item.children.length > 0) { // 存放选中的数据 let selectDataList = []; item.children.forEach((evt) => { if (Number(evt.isSelected === 1)) { selectDataList.push(evt.resourceId); } }); // resourceNameList是el-checkbox-group中v-model需要绑定的数据,必须是一个数组,存放选中的数据 item.resourceNameList = selectDataList; // checkAll是判断当前目录是否全选 item.checkAll = selectDataList.length === item.children.length; if (item.checkAll) { item.isSelected = "1"; } // isIndeterminate是判断当前目录是否为半选中状态 item.isIndeterminate = selectDataList.length > 0 && selectDataList.length < item.children.length; // 如果是收费事件,则禁用复选框 if (item.resourceName === "收费事件") { item.chargingEventsDisabled = true; } } }); // 将处理好的数据赋给真正需要渲染到页面上的数组 this.tableData = tableData; }, // 子目录选中事件 resourceCheckItem(evt, val) { let checkedCount = val.length; let refResourceNameList = _.cloneDeep(evt.resourceNameList); let childrenData = _.cloneDeep(evt.children); let deleteIdList = []; childrenData.forEach((item) => { deleteIdList.push(item.resourceId); }); // 两个数组比较,取出相同的元素,代表当前选中的数据 let date = refResourceNameList.filter( (item) => deleteIdList.indexOf(item) > -1 ); // 当前所有数据长度等于选中数据的长度,则表示全选状态 evt.checkAll = checkedCount === date.length; // 当前半选中状态要等于当前选中的数据长度大于0并且当前选中的数据长度小于当前的所有数据长度 evt.isIndeterminate = date.length > 0 && date.length < checkedCount; }, // 目录全选事件 handleSelectionChange(evt, val) { // 如果checkAll为true表示全选,否则取消全选 if (evt.checkAll) { if (evt.children && evt.children.length > 0) { let childrenDataList = _.cloneDeep(evt.children); let optionsData = []; // 拿到子目录的数据,并将子目录里的isSelected都赋值为1 childrenDataList.forEach((item) => { item.isSelected = "1"; optionsData.push(item.resourceId); }); // 如果之前已经有选中的,则追加 let refResourceNameList = _.cloneDeep(evt.resourceNameList); let arr = refResourceNameList.concat(optionsData); // 去重 evt.resourceNameList = Array.from(new Set(arr)); // 将当前目录的isSelected赋值为1 evt.isSelected = "1"; // 取消半选中状态 evt.isIndeterminate = false; } } else { let refResourceNameList = _.cloneDeep(evt.resourceNameList); let childrenData = _.cloneDeep(evt.children); let deleteIdList = []; childrenData.forEach((item) => { deleteIdList.push(item.resourceId); }); // 进行这一步操作是因为所有数据都在一个表格里,为了防止取消全选则全部取消全选的问题,这样可以控制只取消当前目录 // 删除数据相同的元素 let arr = refResourceNameList.filter( (item) => !deleteIdList.some((i) => i == item) ); evt.isSelected = "0"; evt.resourceNameList = arr; } }, }, }; </script>
getSchemeDetail() { this.$api( 'getRiskStrategyBaseStrategyBaseData', this.riskStrategyType, 'params', ) .then((res) => { console.log(res) // this.programList = res.result; this.tableData = res.result if (this.riskStrategyType == 2) { this.checkList = res.result } let checkList = JSON.parse(JSON.stringify(this.checkList)) checkList.forEach((item) => { if (item.children && item.children.length > 0) { let selectDataList = [] item.children.forEach((evt) => { if (Number(evt.selected === 1)) { selectDataList.push(evt.name) } }) this.checkedCities = selectDataList item.checkAll = selectDataList.length === item.children.length if (item.checkAll) { item.selected = '1' } } }) this.checkList = checkList }) .catch((err) => { this.$message.error(err) }) }, // 全选 handleCheckAllChange(checked, item) { if (checked) { if (item.children && item.children.length > 0) { let childrenDataList = JSON.parse(JSON.stringify(item.children)) let optionsData = [] childrenDataList.forEach((i) => { i.selected = '1' optionsData.push(i.name) }) let arr = this.checkedCities.concat(optionsData) this.checkedCities = Array.from(new Set(arr)) item.selected = '1' } } else { let childrenData = JSON.parse(JSON.stringify(item.children)) let deleteIdList = [] childrenData.forEach((i) => { deleteIdList.push(i.name) }) let arr = this.checkedCities.filter( (items) => !deleteIdList.some((i) => i == items), ) item.selected = '0' this.checkedCities = arr } }, // 多选 handleCheckedCitiesChange(value, item) { let checkedCount = item.children.length let childrenData = JSON.parse(JSON.stringify(item.children)) let deleteIdList = [] childrenData.forEach((i) => { deleteIdList.push(i.name) }) let date = this.checkedCities.filter((i) => deleteIdList.indexOf(i) > -1) item.checkAll = checkedCount === date.length },
-
element-ui的el-table表格复选框只能单选,不可多选
2022-06-07 14:15:39element的el-table表格复选框只能选中一条,选择下一条,上一条去掉勾选。使用文档中select方法,el-table绑定一个ref。具体代码实现如下 toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了...element的el-table表格复选框只能选中一条,选择下一条,上一条去掉勾选。使用文档中select方法,el-table绑定一个ref。具体代码实现如下
<el-table :data="childList" border height="100%" size="mini" ref="multipleTable" @select="select"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column type="index" width="55" label="序号"></el-table-column> <el-table-column prop="pay_method" label="支付方式" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="pay_account_no" label="付款方账号" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="recv_account_no" label="收款方账号" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="amount" label="金额" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="summary" label="摘要" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="reference" label="备注" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="trade_date" label="交易时间" :show-overflow-tooltip="true"></el-table-column> </el-table>
data(){ return { bill_id:"" } }, method:{ select(selection, row){ this.bill_id = row.id; // 清除 所有勾选项 this.$refs.multipleTable.clearSelection() // 当表格数据都没有被勾选的时候 就返回 // 主要用于将当前勾选的表格状态清除 if(selection.length == 0) return this.$refs.multipleTable.toggleRowSelection(row, true); }, }
toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
-
vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
2021-11-17 09:20:20又想使用复选框的样式,自己又不想去改样式。 于是可以用js去控制选中的值,如果选中值的长度大于1,则每次只截取第二个数。因为选中值是从后面追加进去的。第二个数就是最新选中值。 效果: 代码: <... -
element-ui的多选框 checkBox实现单选功能
2021-07-01 10:34:28在table中引入了多选复选框 <el-table-column type="selection" width="55" align="center" :reserve-selection="true" > </el-table-column> 引入后 复选框的功能是element-ui自带的多选功能 ... -
element-ui复选框el-checkbox包含单选框el-radio
2022-01-14 14:46:04rwobj:单个复选框包含的所有数据 rwhandleSingleCheck(val, rw, rwobj) { //如果勾选 if (val) { //1.this.allrwPageChecked代表已勾选的数组,把rwobj添加进去 this.allrwPageChecked.push(rwobj) //2.this.... -
elementui复选框checkbox阻止事件冒泡(折叠面板标题中增加复选框,阻止点击复选框折叠面板展开/折叠)
2021-12-31 15:24:38需求:在折叠面板的标题前面加上复选框,可以选中当前数据 问题:点击复选框时,折叠面板会展开又折叠 解决:设置复选框的点击的事件冒泡,注意不是设置change事件的事件冒泡@click.stop.native="()=>{}" <el... -
elementui复选框组改为二选一功能
2021-03-31 15:16:55需求如下:需要使用elemenui中的复选框组实现单选框组二选一的功能,以及两个都不勾选的功能。 解决方法:使用change函数限制勾选的长度 具体代码如下: vue文件中的代码: <el-checkbox-group v-model=... -
vue+element表格复选框改单选框
2021-01-19 17:50:25element表格中复选框是默认的,不用废话,下面是个人需求需要改造的单选框 template模板的el-table标签中定义class名和选择方法 js里是selected的方法,对于里面赋值根据需要增减,clearSelection和... -
ElementUI表格复选与行单选结合
2019-10-21 15:11:55这里首先说一下我所设想的操作场景,用户可以自由通过ElementUI的复选框和全选框和单击行的形式进行相应数据的获取,因为我使用的表格需要获取相应的客户编号与后台进行对接所以在前端获取相应值的时候一开始还是... -
Element表格嵌入复选框以及单选框的方法介绍(代码示例)
2021-03-26 14:18:16本篇文章给大家带来的内容是关于Element表格嵌入复选框以及单选框的方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1,element 表格嵌入CheckBox效果图如下:html代码:... -
ElementUI 将table多选框改为单选框
2022-07-08 18:01:41ElementUI 将table多选框改为单选框 -
el-tree复选框变单选框
2019-08-14 09:43:00在使用element-UI的 树结构 时,在给节点层 加上复选框 属性后,文档里并没有说明怎么 限制复选框单选 ,所以有了下面的代码: -
elementUI tree组件实现只显示某一层级复选框,并且实现单选
2020-08-28 16:44:58elementUI tree组件默认可实现多选,并且复选框在树结构中每一层级都有,如果只想某一个层级展示复选框和实现单选怎么修改呢? 思路: 1、原本想通过禁用某一层级的复选框,达到只能某一层数据可选的功能,但是复... -
element-ui tree 树形控件复选框实现单选
2019-05-23 20:01:24项目开发中在使用到 tree 树形控件实现单选功能,element-ui 官方给出来复选事件,并没有单选操作,自己就研究了一下,代码如下: 1、template 代码中: <el-tree :data="treeData" :props="defaultProps... -
实现table表格checkbox复选框的全选 反选
2019-11-11 19:30:02实现table表格checkbox复选框的全选 反选. -
elementui el-table多选换单选,并去掉表头复选框
2022-07-29 16:48:10elementui el-table多选换单选,并去掉表头复选框 -
将element多选框变为单选框(学习篇)
2021-10-18 13:06:01--------- 使用情况:因为单选的按钮为圆角,样式有些情况不适用,像要多选的样式,单选的功能。要不就是修改样式,要不就是js。----------- 1、HTML部分 <div class="resource_box"> <div class="box" ... -
vue 之 element-ui 实现全选和复选框
2020-10-14 14:47:16<template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column>...el-table-column p. -
Element-UI Table表格实现复选框单选效果
2020-09-18 15:18:54<el-table ref="multipleTable_select" :data="selectMemberDataList" :stripe="true" class="el-ov-single-checkbox-table" @select="handleSelect_select" > <el-table-column ... -
vue+elementUI 使用单选框和复选框时获取数据不回显问题
2019-10-23 13:46:47使用elementUI单选框和复选框,动态循环渲染数据时,选中数据无法回显到页面. 原因: 因为Vue的数据劫持机制 解决方案一 尽量避免对data(){return { }}里的数据进行频繁赋值. 尽量避免嵌套方式赋值. <div v... -
Element-UI 实现el-table复选框默认勾选 回显
2021-11-30 20:54:04业务实现效果 HTML部分 : 着重注意:row-key="getRowKey"与ref="multipleTable"两个属性 ((currentPage - 1) * pagesize, currentPage * pagesize)" :row-style="{ height: '70px' }" :row-key="getRowKey" :cell-... -
vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果
2021-08-23 09:49:07vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果 -
vue-cli4.x + elementUI复选框checkbox的使用
2020-09-30 09:03:242、可以对每一行的数据进行单选 3、将单选/全选的数据在请求后台接口的时候传给后台 这里呢实际上没有用到checkbox,只是用到了element中table组件的一个属性,详情见: 带checkbox的table,只需要设type属性为... -
el-tree显示复选框且单选(选择任意一节点)
2022-04-29 15:48:03vue3+el-tree 单选 -
ElementUI el-table 表格 行选择框改为单选
2022-01-13 16:38:21ElementUI el-table 表格 行选择框改为单选 - wbytts - 博客园 实现方法 首先,表格加一列 <el-table-column type="selection" width="55"></el-table-column> 然后,隐藏掉标头的全选全不选 thead .... -
Element-ui中 树形控件(Tree)实现只显示某一层级复选框且单选
2021-08-30 22:27:41如果只想某个层级展示复选框且实现单选需要怎么修改呢? 思路: 原本想通过禁用某些层级的复选框,达到只能某一层数据可选的功能,但是禁用的复选框仍然显示 效果不好。 通过审查元素发现被禁用的复选框加上了特殊... -
Vue element-ui 实现单选列表
2019-05-16 10:21:05element-ui组件强大,但是使用时发现少了一个最常见的组件:单选列表。 我的概念中的列表框是这样的(从桌面开发带来的习惯-_-) 或者是穿梭框的左半边 但是这么基础的东西,element-ui 竟(懒)然(得)没...
收藏数
1,046
精华内容
418