vue+el-table点击行多选

最新推荐文章于 2024-08-15 17:39:59 发布
最新推荐文章于 2024-08-15 17:39:59 发布
阅读量1.7k 收藏
点赞数 3
分类专栏： vue uniapp 前端 文章标签： vue.js 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yqlnihao/article/details/124594194
版权
前端 同时被 3 个专栏收录
43 篇文章 1 订阅
订阅专栏
uniapp
32 篇文章 1 订阅
订阅专栏
vue
30 篇文章 1 订阅
订阅专栏
这是一个基于Vue.js的表格组件示例，包含了全选、单行选择、点击事件、样式设置等功能。表格数据显示了设备状态、作业状态、工单号等信息，并提供了预览、流程卡、开工等操作按钮。用户可以通过全选复选框来选择所有行，或者通过点击行来单独选择。此外，还实现了回到顶部的功能。
摘要由CSDN通过智能技术生成 

<template>
<div class="wrap">
    <div class="wrap_con">
    <el-table
    ref="singleTable"
    :data="tableData"
    @row-click="changeRow"
    :row-style="isRed"
    class="table">
    <el-table-column
      property="status"
      label="设备状态"
      width="70">
    </el-table-column>
    <el-table-column
      property="name"
      label="作业状态"
      width="70">
    </el-table-column>
    <el-table-column
      property="address"
      label="工单号"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="产品"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="产出单位"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="工序"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="正品数量"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="废品数量"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="废品信息"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="时长"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="班组人员"
      width="70">
    </el-table-column>
     <el-table-column
      property="date"
      label="流程卡号"
      width="70">
    </el-table-column>
    <el-table-column
      property="date"
      label="开始时间"
      width="70">
    </el-table-column>
  </el-table>
    </div>
  <div class="botbut">
      <div class="botbutleft">
          <el-checkbox v-model="checked" @change="setCurrent()">全选</el-checkbox>
        <!-- <button class="but but1">领料</button>
        <button class="but but2">退料</button>
        <button class="but but3">进入任务</button> -->
      </div>
      <div class="botbutright">
        <button class="but but4" @click="backTop()">回到顶部</button>
        <button class="but but5">预览</button>
        <button class="but but6" @click="card()">流程卡</button>
        <button class="but but7">开工</button>
      </div>
  </div>
</div>
  
</template>

<script>
  export default {
    data() {
      return {
          checked:false,
        tableData: [{
          status:'生产中',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          index:0
        }, {
          status:'生产中',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          index:1
        }, {
          status:'生产中',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          index:2
        }, {
          status:'生产中',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          index:3
        },{
          status:'生产中',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          index:4
        },{
          status:'生产中',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          index:5
        },{
          status:'生产中',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          index:6
        }],
        currentRow: null,
        changeList:[]
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.changeList = val;
        // console.log(this.changeList)
      },
      isRed({ row }) {
        //   console.log(row)
      const checkIdList = this.changeList.map((item) => item.index);
      if (checkIdList.includes(row.index)) {
          this.tableData = this.tableData
        return {
          backgroundColor: "rgba(249,168,11,0.20)"
        };
        
      }
    },
    setCurrent(){
        if(this.checked == false){
            this.handleSelectionChange([])
        }else{
            this.handleSelectionChange(this.tableData)
        }
        
    },
      changeRow(row){
        this.changeList.push(row)
        var newArr = []
        this.changeList.forEach((item,index)=>{
            if(newArr.indexOf(item)===-1){
                newArr.push(item)
            }else{
                var arrid=[]
                this.changeList.forEach((item1,index1)=>{
                    if(item1.index === row.index){
                        arrid.push(index1)
                    }
                })
                newArr.splice(arrid[0],1)
            }
        })
        this.changeList = newArr
      },
    //   流程卡
      card(){
          this.$router.push({
            path: '/home/flowCard',
            // query: {
            //     // title: encodeURIComponent(title),
            //     indexs: encodeURIComponent('ssss'),
            // }
          })
      },
    //   回到顶部
      backTop(){
          document.getElementsByClassName('wrap_con')[0].scrollTop = 0;
      }
    }
  }
</script>
<style lang="scss" scoped>
.wrap{
    width: 100%;
    height: 100%;
    font-family: Roboto, Roboto-Medium;
    padding: 12px 16px 89px 16px;
    box-sizing: border-box;
    // overflow-x: auto;'
    overflow: hidden;
    position: relative;
    .wrap_con{
        width: 100%;
        height: 100%;
        overflow: scroll;
    }
    .table{
        // width: 100%;
        // height: 100%;
    }
    .botbut{
        position: absolute;
        width: 100%;
        height: 90px;
        bottom: 0;
        left: 0;
        background: #f6f6f9;
        box-shadow: 0px 1px 0px 0px rgba(27,10,91,0.20) inset; 
        padding: 0px 7px 0px 7px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .botbutleft{
            flex: 1;
             display: flex;
            align-items: center;
            .el-checkbox{
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Bold;
                font-weight: 700;
                color: #645df6;
            }
            
            ::v-deep .el-checkbox__input{
                width: 20px;
                height: 20px;
            }
            ::v-deep .el-checkbox__inner{
                width: 20px;
                height: 20px;
                border: 1px solid #645df6;
                border-radius: 4px;
            }
            ::v-deep .el-checkbox__inner::after{
                width: 2px;
                height: 7px;
                top: 3px;
                left: 6px;
            }
            button{
                margin-left: 9px;
            }
        }
        .botbutright{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: right;
            button{
                margin-right: 9px;
            }
        }
        .but{
            width: 144px;
            height: 56px;
            border-radius: 8px;
            border: 0;
            font-size: 18px;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: CENTER;
            color: #ffffff;
        }
        .but1,.but2{
            background: #f9a80b;
            box-shadow: 0px 3px 3px 0px rgba(79,53,4,0.60), 0px -2px 2px 0px rgba(0,0,0,0.24) inset, 0px 4px 3px 0px rgba(255,255,255,0.45) inset; 
        }
        .but3{
            background: #00c2bb;
            box-shadow: 0px 3px 3px 0px rgba(6,82,79,0.57), 0px -2px 2px 0px rgba(0,0,0,0.24) inset, 0px 4px 3px 0px rgba(255,255,255,0.45) inset; 
        }
        .but4{
            width: 56px;
            height: 56px;
            background: #007cf1;
            box-shadow: 0px 3px 3px 0px rgba(0,44,86,0.65), 0px -2px 2px 0px rgba(0,0,0,0.24) inset, 0px 4px 3px 0px rgba(255,255,255,0.45) inset; 
        }
        .but5,.but6{
            background: #007cf1;
            box-shadow: 0px 3px 3px 0px rgba(0,44,86,0.65), 0px -2px 2px 0px rgba(0,0,0,0.24) inset, 0px 4px 3px 0px rgba(255,255,255,0.45) inset; 
        }
        .but7{
            float: right;
            background: #645df6;
            box-shadow: 0px 3px 3px 0px rgba(12,8,85,0.70), 0px -2px 2px 0px rgba(0,0,0,0.24) inset, 0px 4px 3px 0px rgba(255,255,255,0.45) inset; 
        }
    }
}
::v-deep .el-table th>.cell{
    font-size: 12px;
    font-weight: 500;
    text-align: LEFT;
    color: rgba(0,0,0,0.85);
    line-height: 22px;
}
::v-deep .el-table__body tr.current-row>td {
    background-color: transparent;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: transparent;
}
// ::v-deep .el-table .success-row {
//   background-color: rgba(249,168,11,0.20);;
// }
</style>
大湿骑码
关注
专栏目录
vue之a-table中实现清空选中的数据
10-16
总的来说，Vue的`a-table`组件结合其`rowSelection`特性，可以方便地处理行选择，并通过自定义`onChange`方法实现选中数据的管理，包括清空选中状态。理解并熟练运用这些概念，对于构建交互式和数据驱动的Vue应用至...
Vue2 Element el-table多选表格 控制选取的思路
白瑕 的博客
08-29 3470
el-table多选表格实时获取所有选中项, 获取当前选中项, 选取控制, 获取整行数据, 遍历构建多选表格 使用一个div将需要遍历生成的列包裹, 在div上v-for遍历, 但el-table仍然是基于HTML表格的封装, 这就像往原生HTML表格的列外面套了div, 会直接破坏表格结构.......
vue3实现el-table表格单选功能以及默认选中某一行数据以及多选
weixin_53339757的博客
11-08 9399
vue3实现el-table表格单选功能以及默认选中某一行数据
el-table的多选功能
最新发布
qq_43235503的博客
08-15 304
el-table的多选功能
vue3 elementPlus实现el-table点击行多选，并在列表中展示选中内容
weixin_52688746的博客
09-07 6168
vue3+elementPlus 实现表格选中多行展示
element的table多选操作复选框的是否可选
m0_52611940的博客
12-21 482
element的table多选操作复选框的是否可选
element中table多选功能禁止选择某一项
lll19960406的博客
09-01 5109
element-ui中的table的多选很好用，但是如果其中某一项禁止选择，该怎样操作呢 在官方文档中，有一个这样的属性，可以控制是否禁止选择 <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> selectable(row,index)...
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，...
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
在表格列`el-table-column`的定义中，我们看到了如何基于当前列的索引（`index`）和列的属性（`column`）来决定如何渲染数据，同时，也看到了如何使用`@click`来绑定点击事件，以及使用`el-icon-plus`和`el-icon-...
element ui分页多选,翻页记忆的实例
10-16
在代码部分，首先定义了Vue组件的数据部分，包括表格数据（tableData）、选中的数据数组（multipleSelectionAll和multipleSelection）、分页参数（page）以及表格中每行数据的唯一标识键（idKey）。 ```javascript ...
vue3 el-table多选限制选择数量
qq_44834141的博客
04-20 1400
vue3 el-table多选限制选择数量
解决 Vue3 + Element Plus 树形表格全选多选以及子节点勾选的问题
唐先森的博客
10-23 3836
最近用到了组件库的中的树形表格，但官网例子只能做到一层勾选，不能做到多层勾选，无法满足业务需求，所以研究了下，如何在子节点选满的情况下自动勾选上父节点？勾选父节点时自动勾上全部子节点？
vue3 element ui el-table分页多选功能
jieweiwujie的博客
02-26 298
【代码】vue3 element ui el-table分页多选功能。
vue element ＜el-table＞ 实现分页多选
qq_38990668的博客
11-07 415
vue element 实现分页多选
el-table 点击行自动勾选
m0_71835253的博客
12-14 703
就可以实现点击行的时候自动勾选。
elementUI中table表格添加一列多选框（vue）
热门推荐
lhxsirky的博客
08-11 1万+
效果图如下： 在elementUI中使用多选框checkbox在表格中有两种方法，第一种就像上图中第一列多选框一样，只需在elementUI中table的一列设置一个属性type="selection"即可，如下： <el-table :data="tableData" :current-page.sync="currentPage" @selection-change="handleSelectionChange" style="width: 100%;" class=
el-table表格的一些操作-表格实现单选、多选
qq_52126119的博客
10-20 2121
el-table表格的一些操作-表格实现单选、多选
element ui table 多选且可以点击行勾选数据
Igiveufireworks的博客
05-05 2476
toggleRowSelection用于多选表格，切换某一行的选中状态，使得点击行即可进行选择。
vue3 el-table-column 多选禁用代码
04-18
以下是禁用 Vue3 的 el-table-column 多选的示例代码： ``` <el-table :data="tableData" :selection="multipleSelection"> <el-table-column type="selection" width="55"> <el-checkbox v-model=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值