Iview设置某一行不能选中

曾经终败给现在 2023-06-12 04:10 18阅读 0赞

以下生效的前提是，给table中的data添加 \_disabled属性

> 通过给 columns 数据设置一项，指定 type: ‘selection’，即可自动开启多选功能。
> 
> 给 data 项设置特殊 key \_checked: true 可以默认选中当前项。
> 
> 给 data 项设置特殊 key \_disabled: true 可以禁止选择当前项。
> 
> 正确使用好以下事件，可以达到需要的效果：
> 
> @on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。  
> @on-select-all，点击全选时触发，返回值为 selection，已选项。  
> @on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。

const listData = result.data;
      //针对返回的数据for循环，来控制前端某行是否可以被选择
      for (var i = 0; i < listData.data.length; i++) { 
          if (listData.data[i].auditStatus >1) { //1 是审核中，2是审核通过，3是已驳回
              listData.data[i]._disabled = true;
          }
      };

<template>
        <div>
            <Table border ref="selection" :columns="columns4" :data="data1"></Table>
            <Button @click="handleSelectAll(true)">Set all selected</Button>
            <Button @click="handleSelectAll(false)">Cancel all selected</Button>
        </div>
    </template>
    <script>
        export default { 
            data () { 
                return { 
                    columns4: [
                        { 
                            type: 'selection',
                            width: 60,
                            align: 'center'
                        },
                        { 
                            title: 'Name',
                            key: 'name'
                        },
                        { 
                            title: 'Age',
                            key: 'age'
                        },
                        { 
                            title: 'Address',
                            key: 'address'
                        }
                    ],
                    data1: [
                        { 
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            date: '2016-10-03'
                        },
                        { 
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park',
                            date: '2016-10-01'
                        },
                        { 
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02'
                        },
                        { 
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        }
                    ]
                }
            },
            methods: { 
                handleSelectAll (status) { 
                    this.$refs.selection.selectAll(status);
                }
            }
        }
    </script>