element table複数選択で行を無効にする

4319 ワード

先端 vue.js node.js

ビジネスシーン:複数選択テーブルの行を選択できません
次の図の効果を実現:

あまり話さないで、直接コードをつけます.

バックエンドdataはデータを返す

tableData: [
                {
                    appendixName: '1.   .pdf',
                    appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
                    id: 5,
                    isHidden: 0,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.   .pdf',
                    appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
                    id: 5,
                    isHidden: 1,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.   .pdf',
                    appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
                    id: 5,
                    isHidden: 1,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.   .pdf',
                    appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
                    id: 5,
                    isHidden: 0,
                    name: '123',
                    no: 0,
                    workId: 61
                },
                {
                    appendixName: '1.   .pdf',
                    appendixUrl: 'http://hhgw-crm.oss-cn-beijing.aliyuncs.com/dev/crm/vrh7x7fhl1_1.%E8%AF%B7%E6%B1%82%E4%B9%A6.pdf',
                    id: 5,
                    isHidden: 0,
                    name: '123',
                    no: 0,
                    workId: 61
                }
            ]

呼び出し方法

selectable (row, index) {
            return row.isHidden === 0 // isHidden 0-  1-    false   
        }

selectableメソッドは、複数選択tableテーブルでのみ有効であり、el-table-columnに書く必要があり、falseを返すときに選択を無効にします.

unicornのインストール

素人がNginxとUnicornつかってRailsを動かしたいと思った。