vue自定义指令表格多选

最新推荐文章于 2023-02-21 14:27:15 发布
最新推荐文章于 2023-02-21 14:27:15 发布
阅读量344 收藏
点赞数
分类专栏： 指令 js vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuqinglaoxingxing/article/details/114523393
版权
js 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
vue
4 篇文章 0 订阅
订阅专栏
指令
1 篇文章 0 订阅
订阅专栏 
import Vue from 'vue'
import xhtml from '../service/xhtml'
// 判断全选类型在输入表格还是输出表格
const isInput = function(modifiers){
    return modifiers.input
}
// 解析表达式的值
let getExpression = function(expression){
    let expressionArr = expression.replace(/^{|}$/g,"").split(",")
    let expressionObj = {};
    expressionArr.forEach(element => {
        const [key,value] = element.split(":")
        expressionObj[key] = value
    });
    return expressionObj
}
// 自定义后缀名
const suffix={
    element:"Check"  //是否选中
}
// 检查是否当前数据全部被选中了
const checkIsAll = function(list,baseKey){
    return list.every(item=>{
        return item[baseKey+suffix.element]
    })
}
// 对返回的数据进行处理
const callbackDataFilter = function(data,specialKey){
    return data.filter((item,index)=>{
        return item[specialKey]
    })
}
// 对于输出表格获取当前对象唯一标志
const getUniqueKeyStr = function(el,item){
    let uniquValueArr = [];
    el.__uniqueKey__.forEach(key=>{
        uniquValueArr.push(item[key])
    })
    return uniquValueArr.join("");
}
// 对于输出表格进行数据保存处理逻辑
const outPutTableDataHandle = function(el,filterDataArr){
    filterDataArr.forEach((filterData)=>{
        let filterDataKey = getUniqueKeyStr(el,filterData)
        if(!el.__OUT_PUT_TABLE_OBJ__[filterDataKey]){
            el.__OUT_PUT_TABLE_OBJ__[filterDataKey] = filterData;
        }
    })
    return el.__OUT_PUT_TABLE_OBJ__
}
// 单选--定义改变传递数据前将outPutTableDataHandle值删除，防止回显问题
const changeOutPutTableDataHandle = function(el,item,check){
    let uniqueKeyStr = getUniqueKeyStr(el,item)
    if(!check&&el.__OUT_PUT_TABLE_OBJ__[uniqueKeyStr]){
        delete el.__OUT_PUT_TABLE_OBJ__[uniqueKeyStr]
    }
    return  el.__OUT_PUT_TABLE_OBJ__
}
// 全选--定义改变传递数据前将outPutTableDataHandle值删除，防止回显问题
const changeOutPutTableDataAllHandle = function(el,list,check){
    list.forEach((item)=>{
        let itemKey = getUniqueKeyStr(el,item)
        if(!check&&el.__OUT_PUT_TABLE_OBJ__[itemKey]){
            delete el.__OUT_PUT_TABLE_OBJ__[itemKey]
        }
    })
    return el.__OUT_PUT_TABLE_OBJ__
}
Vue.directive('tableCheck', {
    
    bind:function(el,binding){
        /**
         * 初始化对于基本信息获取
         * */ 
        // 判断是输入表格还是输出表格
        isInput(binding.modifiers)?el.__IS_INPUT__ = true:el.__IS_INPUT__ = false
        // 对于输出表格获取唯一key，翻页进行返显,生成保存数据数组
        !el.__IS_INPUT__?el.__uniqueKey__ = binding.value.uniqueKey:""
        !el.__IS_INPUT__?el.__OUT_PUT_TABLE_OBJ__ = {}:""
        // 解析表达式的值
        let expression = getExpression(binding.expression)
        el.__expression__ = expression
        // 保存基础key值，避免后续重复
        el.__baseKey__ = expression.list.replace(/\./g,"")
        el.__specialKeyCheck__ = el.__baseKey__+suffix.element
        
        if(binding?.value?.list){
            el.__list__ = binding.value.list
            el.__list__.map(function(item){
                item[el.__specialKeyCheck__] = false
            })
        }

        // 定义点击事件
        const checkItemClickHandle = function(event){
            let index = this.getAttribute("_index_")
            el.__list__[index][el.__specialKeyCheck__] = this.checked
            if(checkIsAll(el.__list__,el.__baseKey__)){
                el.__iSign__.classList.remove("unselect")
                el.__iSign__.classList.add("select")
            }else{
                el.__iSign__.classList.remove("select")
                el.__iSign__.classList.add("unselect")
            }
            el.__iSign_false__.setAttribute('class', el.__iSign__.getAttribute('class'));
            // 回调函数赋值给页面
            el.__IS_INPUT__?"":el.__OUT_PUT_TABLE_OBJ__ = changeOutPutTableDataHandle(el,el.__list__[index],this.checked)
            let filterValue = callbackDataFilter(el.__list__,el.__specialKeyCheck__)
            el.__IS_INPUT__?"":el.__OUT_PUT_TABLE_OBJ__ = outPutTableDataHandle(el,filterValue)
            el.__IS_INPUT__?
                binding.value.callback(filterValue,el.__list__)
                :
                binding.value.callback(Object.values(el.__OUT_PUT_TABLE_OBJ__),el.__list__)
        }
        el.__checkItemClickHandle__ = checkItemClickHandle;
    },
    inserted: function (el, binding) {
        // 全选按钮
        let th_check_all = el.querySelector("th[check-all]")
        // 全选样式（图片）
        let iSign = th_check_all.querySelector("i")
        el.__iSign__ = iSign
        // 全选样式（图片 假）
        let iSign_false  = el._TR_DIV_DOM_.querySelector("i")
        el.__iSign_false__ = iSign_false
        // 生成选择节点
        let checkItemTd = el.getElementsByClassName("check-item")
        // 新增点击节点并添加事件
        Array.from(checkItemTd).forEach((item,index)=>{
            let checkItem = item.querySelector("input");
            // 单个元素点击触发
            xhtml.bind(checkItem,"click",el.__checkItemClickHandle__)
        })
        // 全选按钮点击触发
        xhtml.bind(th_check_all, 'click', function () {
            let isNotSelect = iSign.classList.contains("unselect")
            el.__list__ = el.__list__.map(item=>{
                item[el.__specialKeyCheck__] = isNotSelect?true:false;
                Array.from(checkItemTd).forEach((item,index)=>{
                    let checkItem = item.querySelector("input");
                    checkItem.checked = isNotSelect
                })
                return item;
            })
            if(isNotSelect){
                iSign.classList.remove("unselect")
                iSign.classList.add("select")
            }else{
                iSign.classList.remove("select")
                iSign.classList.add("unselect")
            } 
            iSign_false.setAttribute('class', iSign.getAttribute('class'));
            // 回调函数赋值给页面
            el.__IS_INPUT__?"":el.__OUT_PUT_TABLE_OBJ__ = changeOutPutTableDataAllHandle(el,el.__list__,isNotSelect)
            let filterValue = callbackDataFilter(el.__list__,el.__specialKeyCheck__)
            el.__IS_INPUT__?"":el.__OUT_PUT_TABLE_OBJ__ = outPutTableDataHandle(el,filterValue)
            el.__IS_INPUT__?
                binding.value.callback(filterValue,el.__list__)
                :
                binding.value.callback(Object.values(el.__OUT_PUT_TABLE_OBJ__),el.__list__)
        })
    },
    update: function (el, binding) {
        // 数据dom改变，数据改变，对于分页  情况进行数据回显
        el.__list__ = binding.value.list
        el.__update__ = false;
        if(!el.__IS_INPUT__&&el.__list__){
            el.__list__ = el.__list__.map((item)=>{
                if(item[el.__specialKeyCheck__]===undefined){
                    el.__update__ = true;
                }
                let uniqueKeyStr = getUniqueKeyStr(el,item)
                if(el.__OUT_PUT_TABLE_OBJ__[uniqueKeyStr]){
                    item[el.__specialKeyCheck__] = true
                }else{
                    item[el.__specialKeyCheck__] = false
                }
                return item
            })
            if(el.__update__){
                binding.value.callback(undefined,JSON.parse(JSON.stringify(el.__list__)))
            }
            // 校验是否全部选中了
            if(checkIsAll(el.__list__,el.__baseKey__)){
                el.__iSign__.classList.remove("unselect")
                el.__iSign__.classList.add("select")
            }else{
                el.__iSign__.classList.remove("select")
                el.__iSign__.classList.add("unselect")
            }
            el.__iSign_false__.setAttribute('class', el.__iSign__.getAttribute('class'));
            // 对于输出表格获取不到数据行点击单元，在这里再进行处理
            let checkItemTd = el.getElementsByClassName("check-item")
            if(checkItemTd.length!=0){
                // 新增点击节点并添加事件
                Array.from(checkItemTd).forEach((item,index)=>{
                    let checkItem = item.querySelector("input");
                    // 先清除点击事件
                    xhtml.unbind(checkItem,"click",el.__checkItemClickHandle__)
                    // 单个元素点击触发
                    xhtml.bind(checkItem,"click",el.__checkItemClickHandle__)
                })
            }
        }
    },
});
  1. 无分页输入表格用法
 <table v-table-title="{list:params.flist1}"
        v-table-check.input="{list:params.flist1,callback:paramsflist1CallBack}"
       v-col-resize >
       <thead>
           <tr>
               <th check-all>
                   <i class="unselect check-all"></i>全选
               </th>
               <th>序号</th>
               <th order='{"column":"vouKind","type":"NUMBER"}'>凭证种类</th>
               <th>分行代码</th>
               <th>凭证批号</th>
               <th>凭证单位</th>
               <th>数量</th>
               <th>起始凭证序号</th>
               <th>终止凭证序号</th>
               <th>终止凭证序号</th>
               <th>终止凭证序号</th>
               <th>终止凭证序号</th>
               <th>终止凭证序号</th>
               <th>终止凭证序号</th>
               <th>凭证数</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for="(item,index) in params.flist1" :key="index">
           <td class="check-item">
               <input type="checkbox" :_index_="index" v-model="item.paramsflist1Check"/>
           </td>
           <td>{{item.paramsflist1Check}}</td>
           <td><input type="text" v-select='selectList.VouKind_7101' @blur='blur4854346231($event.target,index)' @keypress.enter.prevent='enter4854346231($event.target,index)' v-model="item.vouKind"  :disabled='false' validate-name='凭证种类' v-input-check='[params.vouKind,"select"]'/></td>
           <td><input type="text"  @blur='blur1745662513($event.target,index)' @keypress.enter.prevent='enter1745662513($event.target,index)' v-model="item.subBrnCd"  :disabled='false' validate-name='分行代码' v-input-check='[params.subBrnCd,""]'/></td>
           <td><input type="text"   @keypress.enter.prevent='enter2626388134($event.target,index)' v-model="item.vouBatchNo"  :disabled='false' validate-name='凭证批号' v-input-check='[params.vouBatchNo,""]'/></td>
           <td><input type="text" v-select='selectList.VouUnitCd'  @keypress.enter.prevent='enter2317186231($event.target,index)' v-model="item.vouUnitCd"  :disabled='false' validate-name='凭证单位' v-input-check='[params.vouUnitCd,"select"]'/></td>
           <td><input type="text"   @keypress.enter.prevent='enter5454808410($event.target,index)' v-model="item.count"  :disabled='false' validate-name='数量' v-input-check='[params.count,""]'/></td>
           <td><input type="text"   @keypress.enter.prevent='enter5524352968($event.target,index)' v-model="item.begingVouSeqNo"  :disabled='false' validate-name='起始凭证序号' v-input-check='[params.begingVouSeqNo,""]'/></td>
           <td><input type="text"  @blur='blur7690199946($event.target,index)' @keypress.enter.prevent='enter7690199946($event.target,index)' v-model="item.endVouSeqNo"  :disabled='false' validate-name='终止凭证序号' v-input-check='[params.endVouSeqNo,""]'/></td>
           <td><input type="text"  @blur='blur7690199946($event.target,index)' @keypress.enter.prevent='enter7690199946($event.target,index)' v-model="item.endVouSeqNo"  :disabled='false' validate-name='终止凭证序号' v-input-check='[params.endVouSeqNo,""]'/></td>
           <td><input type="text"  @blur='blur7690199946($event.target,index)' @keypress.enter.prevent='enter7690199946($event.target,index)' v-model="item.endVouSeqNo"  :disabled='false' validate-name='终止凭证序号' v-input-check='[params.endVouSeqNo,""]'/></td>
           <td><input type="text"  @blur='blur7690199946($event.target,index)' @keypress.enter.prevent='enter7690199946($event.target,index)' v-model="item.endVouSeqNo"  :disabled='false' validate-name='终止凭证序号' v-input-check='[params.endVouSeqNo,""]'/></td>
           <td><input type="text"  @blur='blur7690199946($event.target,index)' @keypress.enter.prevent='enter7690199946($event.target,index)' v-model="item.endVouSeqNo"  :disabled='false' validate-name='终止凭证序号' v-input-check='[params.endVouSeqNo,""]'/></td>
           <td><input type="text"  @blur='blur7690199946($event.target,index)' @keypress.enter.prevent='enter7690199946($event.target,index)' v-model="item.endVouSeqNo"  :disabled='false' validate-name='终止凭证序号' v-input-check='[params.endVouSeqNo,""]'/></td>
           <td><input type="text"   @keypress.enter.prevent='enter3456884269($event.target,index)' v-model="item.vouSheetsNum"  :disabled='false' validate-name='凭证数' v-input-check='[params.vouSheetsNum,""]'/></td>
       </tr>
       </tbody>
   </table>

2.有分页输出表格用法

 <table 
     v-table-title="{list:result.flist1}"
     v-table-check.output="{list:result.flist1,callback:resultflist1CallBack,uniqueKey:['tellJnno','payeeNm','payeeOpengBkBkNm']}"
     v-col-resize
     >
         <thead>
             <tr>
                 <!-- <th>序号</th> -->
                 <th check-all>
                     <i class="unselect check-all"></i>全选
                 </th>
                 <th order='{"column":"custno","type":"NUMBER"}'>客户号</th>
                 <th order='{"column":"psnlNm","type":"STRING"}'>个人名称</th>
                 <th order='{"column":"certKind","type":"NUMBER"}'>证件种类</th>
                 <th order='{"column":"certNo","type":"NUMBER"}'>证件号码</th>
                 <th order='{"column":"certValtPrid","type":"DATE"}'>证件到期日期</th>
                 <th order='{"column":"gender","type":"NUMBER"}'>性别</th>
                 <th order='{"column":"tellJnno","type":"NUMBER"}'>交易编号</th>
                 <th order='{"column":"payeeNm","type":"STRING"}'>收款方户名</th>
                 <th order='{"column":"payeeOpengBkBkNm","type":"STRING"}'>收款方开户行名称</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="(item,index) in result.flist1" :key="index">
                 <!-- <td>{{(pageParams.doSubmit_pageIndex-1)*pageParams.doSubmit_pageNum+index+1}}</td> -->
                 <td class="check-item">
                     <input type="checkbox" :_index_="index" v-model="item.resultflist1Check"/>
                 </td>
                 <td><span>{{item.custno}}--{{item.resultflist1Check}}</span></td>
                 <td><span>{{item.psnlNm}}</span></td>
                 <td><span>{{item.certKind}}-{{selectList.CertKind[item.certKind]}}</span></td>
                 <td><span>{{item.certNo}}</span></td>
                 <td><span>{{item.certValtPrid|dateTime('yyyy/MM/dd')}}</span></td>
                 <td><span>{{item.gender}}-{{selectList.Gender[item.gender]}}</span></td>
                 <td><span>{{item.tellJnno}}</span></td>
                 <td><span>{{item.payeeNm}}</span></td>
                 <td><span>{{item.payeeOpengBkBkNm}}</span></td>
             </tr>
         </tbody>
     </table>

相关素材
未选中
选中
tip:
xhtml为相关dom基础操作
记得还有回调函数哦

无情老星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 Element el-table多选表格 控制选取的思路
白瑕 的博客
08-29 3347
el-table多选表格实时获取所有选中项, 获取当前选中项, 选取控制, 获取整行数据, 遍历构建多选表格 使用一个div将需要遍历生成的列包裹, 在div上v-for遍历, 但el-table仍然是基于HTML表格的封装, 这就像往原生HTML表格的列外面套了div, 会直接破坏表格结构.......
vue 带全选和多选的表格怎么写_vue element 表格自带全选框 与 自己实现的多选框全选按钮 联动...
weixin_30000735的博客
01-14 238
用Vue + Element 做一个复杂点的表格，只是 翻页的时候，下方的全选还是选中状态，翻页如何让它跟上方的显示一样？@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage"background:page-sizes="[5, 10, 20, 30, 40]":...
vue 实现表格点击单选、多选
吃黄瓜不蘸酱的博客
02-21 2942
添加 ref属性名 在表格上加@row-click单击事件。在表格上添加@selection-change方法。这个方法可以保证每次都是选择最后点击的那行。selection即为选中的多个数据的数组。
vue实现列表多选择
weixin_45408578的博客
04-07 2024
data数据 dataTypeList:[ { label:'数字', value:'TH' }, { label:'字符串', value:'ZDH' }, { label:'英文', value:'ZDDM' } ], html结构： <div.
Vue实战篇十五：表格数据多选在实际项目中的技巧
我的博客
11-18 2833
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
vue自定义指令实现方法详解
10-17
主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue实现自定义多选按钮
10-15
主要为大家详细介绍了vue实现自定义多选按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue自定义ComboBox下拉框多选组件.zip
04-06
用途：一般用于系统管理中多选角色，涉及 1、css样式：flex布局，postion之absolute，relative，画三角形 2、input checkbox类型的 v-model 双向绑定 onchange事件 3、数组过滤及循环遍历 4、子组件向父组件传值
Vue自定义指令实现checkbox全选功能的方法
08-27
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue自定义多选组件使用详解
10-14
主要为大家详细介绍了Vue自定义多选组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现多选多列选择
03-24
用js实现多选控件,也可以分多列。 ... ... ... 很简单，不多写了.
vue 带全选和多选的表格怎么写_vue checkbox 全选 数据的绑定及获取和计算方法
weixin_39672979的博客
01-17 188
html第一个CheckBox全选第二个定义return {dianji:'12',list: [],value:{},value1:{},checkAll: false,checkArr:[],checkboxModel:[],wodeshi:'0',checked:false}lll: function(){var self = this;var sum=0;setTimeout(functi...
vue 自定义多选框组件
web00_11的博客
02-17 1670
自定义多选框组件 <template> <div class="checkBox"> <input v-model="isInherit" @click="handlerChecked" :style="`width: ${width}px; height: ${height}px;`" type="checkbox" id="inp" /> <label for="inp"> <span :style="`font-
Vue中表单上传时对多选框的处理
luo254的博客
08-04 893
Vue中表单上传时对多选框的处理
vue实现多选、全选
热门推荐
m0_59224033的博客
09-05 1万+
vue实现多选、全选功能，复制粘贴开箱即用，简简单单，干净卫生，欢迎C+V
Vue - 实现多选功能，点击选中并高亮显示效果（支持全选 / 反选，以及轻松的 “回显“ 数据）适用于商品、自定义卡片、标签的多选功能，选中多个选项，并且使其高亮，详细教程功能源码，干净整洁开箱即用
王佳斌
12-01 2985
vue实现多选全选功能，功能源码开箱即用，vue 多选功能，vue实现商品多选功能，Vue实现多选功能，vue实现自定义多选与单选的答题功能，vue 实现单选/多选效果，使用Vue实现标签多选功能，vue中,选中多个选项,并且使其高亮，vue实现点击选中高亮效果，vue中,选中多个选项,并且使其高亮，vue中,选中多个选项,并且使其高亮，Vue:实现一组按钮的多选功能，vue 实现选项卡多选功能,点击选中,再点击取消选中，vue实现点击当前标签高亮效果，vue多选功能(vue实现按钮多选)，使用vue实现标
el-table中单击选中单元格，再次点击可取消选中，并支持多选
lll19960406的博客
10-26 1856
这次的需求中还要求单击选中单元格，再次点击可取消选中，并且支持多选 其中用到的数据结构同上一篇文章一致，我就不在贴代码了 博客园地址：https://www.cnblogs.com/bingchenzhilu/p/16827461.html <el-table v-loading="loading" :data="assistlist.lists" @cell-click="gocl...
javascript实现多选
WQ的技术分享
11-21 1094
html代码 js代码 var app = new Vue({ el : “.box”, data : { cities : [“上海”,“北京”,“广州”,“重庆”,“西安”], arr : [] }, methods :{ checkedBox(i){ if(this.arr.includes(i)){ //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效 //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次
vue怎么实现表格多选行数据
最新发布
04-28
在 Vue 中实现表格的多选行数据，一般有两种方式： 1. 使用 Checkbox 实现：在每一行数据前添加一个 Checkbox，然后将选中的行的数据存储到一个数组中。具体实现可以参考以下代码： ```html <template> <div> <table> <thead> <tr> <th> <input type="checkbox" v-model="allChecked" @change="checkAll" /> </th> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="item.id"> <td> <input type="checkbox" v-model="checkedList" :value="item" /> </td> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { list: [ { id: 1, name: "Tom", age: 18 }, { id: 2, name: "Jerry", age: 20 }, { id: 3, name: "Mike", age: 22 } ], checkedList: [], allChecked: false }; }, methods: { checkAll() { if (this.allChecked) { this.checkedList = [...this.list]; } else { this.checkedList = []; } } } }; </script> ``` 2. 使用表格的 row-click 事件实现：在表格中添加一个 row-click 事件，当用户选中某一行时，将该行的数据存储到一个数组中。具体实现可以参考以下代码： ```html <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="item.id" @click="handleClick(item)"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { list: [ { id: 1, name: "Tom", age: 18 }, { id: 2, name: "Jerry", age: 20 }, { id: 3, name: "Mike", age: 22 } ], checkedList: [] }; }, methods: { handleClick(item) { const index = this.checkedList.findIndex(i => i.id === item.id); if (index > -1) { this.checkedList.splice(index, 1); } else { this.checkedList.push(item); } } } }; </script> ``` 这两种方式都可以实现表格的多选行数据，具体选择哪种方式可以根据实际情况进行选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值