开发环境:vue 2.x + element-ui 2.x


先看张图片

iShot_2024-09-24_14.33.32.png

如上图所示,表格的复选框是否可用,它是根据数据的审核状态来控制的。当状态为已审核时,复选框为禁用状态。而 el-table 组件中并没有提供这样的功能,所以需要我们自己来控制。下面是具体实现代码:


HTML 部分

<el-table :data="list" @select-all="selectAll">
    <!-- type="selection" 用于全选 -->
    <el-table-column type="selection" width="55" align="center" key="chkbox">
        <template slot-scope="scope">
            <!-- 复选框 -->
            <el-checkbox v-model="scope.row.checked" :disabled="scope.row.status === 1" @change="selectChange(scope.row)"></el-checkbox>
        </template>
    </el-table-column>

    <!-- 省略其它列... -->
</el-table>


JAVASCRIPT 部分

export default {
    data() {
        return {
            list: [],
            selectedRow: [],
            page: { index: 1, size: 20 }
        }
    },
    methods: {
        // 通过接口获取列表数据
        async getList() {
            const _list = await $http.get('/api/list', { ...this.page })

            // 遍历数据,添加 checked 属性,用于控制复选框是否选中
            this.list = _list.map(x => {
                return {
                    ...x,
                    checked: false, // 默认不选中
                }
            })

            // 回显,注意:需要等表格渲染完成,否则无效,可以使用 $nextTick
            this.$nextTick(() => {
                // 数据翻页后,保持选中状态
                this.selectedRow.forEach(item => {
                    const one = this.list.find(i => i.id == item.id)
                    one && (one.checked = true)
                })
            })
        },

        // 复选框切换
        selectChange (row) {
            const index = this.selectedRows.findIndex(item => item.id == row.id)
            if (index !== -1) {
                this.selectedRows.splice(index, 1)
                row.checked = false
            } else {
                this.selectedRows.push(row)
                row.checked = true
            }
        },

        // 全选
        selectAll (selection) {
            if (selection.length > 0) {
                selection.forEach(item => {     
                    // 注意,全选的时候要排除状态为已审核的数据,因为已审核的数据是禁用的,复选框处于 disabled 状态,不能选中
                    // 并且为了防止重复添加,需要判断是否已经存在 selectedRows 数组中,不存在的才 push
                    if (item.status === 0 && this.selectedRows.findIndex(i => i.id == item.id) < 0) {
                        item.checked = true
                        this.selectedRows.push(item)
                    }
                })
            } else {
                this.list.forEach(item => {
                    const index = this.selectedRows.findIndex(i => i.id == item.id)
                    if (index !== -1) {
                        item.checked = false
                        this.selectedRows.splice(index, 1)
                    }
                })
            }       
        }
    }
}


我们利用 el-table 的 @select-all 事件,来实现全选功能。而单行的选择则使用 el-checkbox 组件,通过 @change 事件来控制复选框的选中状态。这样就可以通过状态来控制 el-checkbox 的 disabled 属性,从而实现复选框的禁用功能。另外,我们给数据源添加 checked 属性,用于控制复选框的选中状态。

本文最后更新于 2024-09-26 14:30:11VUE
天生我材必有用,千金散尽还复来~~
作者:鄢云峰 YYF声明:转载请注明文章出处地址:https://yanyunfeng.com/article/66
评论
提交
Comments | 2 条评论
xxxxx2024-11-15 09:48:20
#1 回复
列属性上有一个selectable属性,可以以函数的形式返回布尔值即可控制能否选中的功能
鄢云峰站长2024-11-15 11:11:42
#2 回复
@xxxxx 看到了,谢谢提醒,我这是又做了无用功😅 selectable:Function(row, index) 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选