Element的table多选表格实现单选效果

最新推荐文章于 2024-07-23 11:14:55 发布

白月光107

最新推荐文章于 2024-07-23 11:14:55 发布

阅读量619

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_63621456/article/details/126480680

版权

下面的代码只是我自己结合自己的工作需求做的一个笔记,如果不能实现,可以多百度几个试试,我也是百度之后结合自己的工作需求改的

别的博主写了很多的事件,在一番尝试之后,我发现只需要这两个就可以是实现了,不过会多次执行,因为我在这两个事件都不做后端接口的请求再加上数据也不多,我就想上锁让@select执行一次就好,好像我上的锁是不起作用的,但是对于我目前的需求,也没关系

@selection-change="handleSelectionChange"
@select="select"

 <el-table
:data="tableData" 
rowKey="id" 
:expand-row-keys="expands" 
ref="multipleTable"
:tree-props="{ children: 'childes', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange" 
@row-click="onselectOp" 
@select="select" 
:height="type ? '500' : '680'">
<el-table-column width="55" type="selection" :selectable="selected" :reserve-selection="true" v-if="!type"></el-table-column>
</el-table>

 data () {
        return {
                isFock: false,
}

methods:{
//关键在于select 事件
   select (selection, row) {
            if (!this.isFock) return;
            // 清除 所有勾选项
            this.$refs.multipleTable.clearSelection();
            // 当表格数据都没有被勾选的时候 就返回
            // 主要用于将当前勾选的表格状态清除
            if (selection.length == 0) return;
            this.$refs.multipleTable.toggleRowSelection(row, true);
            this.isFock = false;
        },

        handleSelectionChange (val) {
         //isFock  是给 this.$refs.multipleTable.toggleRowSelection()事件上的锁,
         //好像这个锁是不起作用的  时间就了不记得了  下次写的时候再看看
         //反正这样是可以实现单选的效果的

            this.isFock = false;//记得下面操作完之后上锁
          
          // console.log(val);
          // console.log(nuemultipleSelection);
          // 删除input编辑
          //if (nuemultipleSelection.length > 0) {
          //    nuemultipleSelection[0].childes.map((item, index) => {
          //       if (item.icon) {
          //           nuemultipleSelection[0].childes.splice(index, 1);
          //}
          //       });
          //  }
          //  if (val.length > 1) {
          //      console.log([val[val.length - 1]]);
          //  }
          // nuemultipleSelection = val.length > 1 ? [val[val.length - 1]] : val;
          //   this.multipleSelection = JSON.parse(
          //    JSON.stringify(val.length > 1 ? [val[val.length - 1]] : val)
          //  );
          // console.log(nuemultipleSelection);
          // console.log(this.multipleSelection);

           
            this.isFock = true;
        },
}