el-table中锁定某一行中的某些列是否被禁用
一、el-table中锁定某一行中的某些列是否被禁用
业务场景:锁定表格中的某一行并将该行中的某些列禁用掉,某些列不禁用
业务分析:
- 锁定某一行:通过某些条件锁定到某一行(可以看rowClassName,锁定到某一行后会加上该名字并展示为该颜色)
- 锁定某一列:通过列名锁定到某一列(这里通过code锁定的)
- 通过index:判断当前行是否需要被禁用
- 排除不是需要的那一行及那一列:进行逻辑处理(不做禁用)
<template>
<div class="root">
<el-form ref="form" :model="form">
<el-table
:data="form.services"
row-key="id"
height="540px"
fit
:row-class-name="rowClassName"
>
<el-table-column prop="code" :label="t('table.code')">
<template #default="{row,$index}">
<el-form-item :prop="`services.${$index}.code`">
// 传递code标识符
<el-input
v-model="form.services[$index].code"
:disabled="isDisabled(row.id, $index, 'code')"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script lang="ts">
import {
toRefs } from 'vue';
export default defineComponent({
name: 'add',
components: {
EnumSelect },
setup() {
const state = reactive<ViewState>({
form: {
services: [],
},
origin: [],
});
const updated = computed<boolean>(() => {
return state.order.status !== status.INIT;
});
// 判断是否禁用
function isDisabled(id: string, index: number, column: string) {
// 不符合条件的不做处理
if (updated.value) {
return state.origin.some(item => item.id === id);
}
// 新增行
if (!state.origin.some(item => item.id === id)) {
return;
}
// 判断当前行是否需要禁用
if (!updated.value && state.origin[index].Code === '01') {
if (column === 'code') {
return false;
}
return true;
}
// 判断非当前行是否需要禁用
return state.origin.some((item, idx) => {
// 不是当前行的情况下,判断id是否匹配
if (idx !== index && id === item.id) {
return true;
}
});
}
return {
...toRefs(state),
isDisabled,
};
},
methods: {
rowClassName({
row, rowIndex }: {
row: order }) {
// 锁定某一行 呈现exception-order颜色
if (row.Name === '1545') {
return 'exc';
}
},
},
});
</script>
<style lang="scss">
.el-table {
.el-form-item {
margin-bottom: 0 !important;
}
}
</style>
<style scoped lang="scss">
.root {
.exc {
background-color: map-get($colors, 'danger', 'light-7') !important;
}
}
</style>