element-ui table中使用type=‘selection‘ 实现禁用,勾选,默认选中不可修改 三种状态显示问题

element-ui table中使用type='selection' 实现禁用勾选默认选中不可修改 三种状态显示问题

实现效果



需求

1.status='CheckOk' 时 勾选框默认选中但不可修改勾选状态

2.status='CheckFail' 时 勾选框禁用

3.status='' 时 勾选框可以勾选

实现思路

采用el-table表格自带的勾选框type='selection' 实现

实现 1.status='CheckOk' 时 勾选框默认选中但不可修改勾选状态

  1. 首先要实现默认选中

toggleRowSelection : 有两个参数(row, selected

用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)

javascript 复制代码
methods:{
	    // status='CheckOk' 默认选中
     defaultChecked() {
            var that = this;
            that.$nextTick(() => {
                this.tableData.forEach((v, i) => {
                    if (v.status == 'CheckOk') {
                        this.$refs.table.toggleRowSelection(v, true);
                    }
                });

            });
           } 
   },

将表格列的type类型设置为selection,添加:selectable='方法名'

html 复制代码
  <el-table-column type="selection" width="50" :selectable="selectable" />
javascript 复制代码
methods: {
	 //判断勾选
        selectable(row, index) {
            if (row.status == 'CheckFail' || row.status == 'CheckOk') {
                return false;
            } else {
                return true;
            }
        },
}
        

完整代码

html 复制代码
     <el-table ref="table" 
               :header-cell-style="{ color: '#FFF', background: '#333' }" 
               :data="tableData"
               style="width: 100%" :row-key="getRowKey" 
               :row-style="tableRowStyle"
               @selection-change="handleSelectionChange">
        <template slot="empty">
            <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
        </template>
        <el-table-column type="selection" width="50" :selectable="selectable" />
        <el-table-column prop="ri" :label="$t('outSideShelf.ri')" />
        <el-table-column prop="needNum" :label="$t('outSideShelf.needNum')" />
        <el-table-column prop="status" :label="$t('outSideShelf.status')" />
</el-table>
javascript 复制代码
mounted(){
this.defaultChecked() // 该方法可以在拿到表格数据后进行调用
}
methods: {
    // status='CheckOk' 默认选中
     defaultChecked() {
            var that = this;
            that.$nextTick(() => {
                this.tableData.forEach((v, i) => {
                    if (v.status == 'CheckOk') {
                        this.$refs.table.toggleRowSelection(v, true);
                    }
                });
            });
          } 
	 //判断勾选
        selectable(row, index) {
            if (row.status == 'CheckFail' || row.status == 'CheckOk') {
                return false; // 禁用
            } else {
                return true; //不禁用
            }
        },
        // status='CheckFail' 该行背景为灰色
         tableRowStyle({ row, rowIndex }) {
            let rowBackground = {};
            if (row.status == 'CheckFail') {
                rowBackground.background = '#6d6d6d';
                rowBackground.color = "#fff";
            } else {
                rowBackground.background = "#333";
                rowBackground.color = "#fff";
            }
            return rowBackground;
        },
}
相关推荐
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
鱼樱前端12 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆14 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅14 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水15 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了15 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry16 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户261245834016118 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川18 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术19 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model