feat(table): action支持配置disabled

This commit is contained in:
roymondchen 2025-10-15 14:32:45 +08:00
parent 5387a18024
commit 8809351537
3 changed files with 48 additions and 2 deletions

View File

@ -15,6 +15,7 @@
size="small"
:type="action.buttonType || 'primary'"
:icon="action.icon"
:disabled="disabled(action.disabled, scope.row)"
@click="actionHandler(action, scope.row, scope.$index)"
><span v-html="formatter(action.text, scope.row)"></span
></TMagicButton>
@ -71,9 +72,22 @@ const display = (fuc: boolean | Function | undefined, row: any) => {
if (typeof fuc === 'function') {
return fuc(row);
}
if (typeof fuc === 'boolean') {
return fuc;
}
return true;
};
const disabled = (fuc: boolean | Function | undefined, row: any) => {
if (typeof fuc === 'function') {
return fuc(row);
}
if (typeof fuc === 'boolean') {
return fuc;
}
return false;
};
const formatter = (fuc: string | Function | undefined, row: any) => {
if (typeof fuc === 'function') {
return fuc(row);

View File

@ -21,7 +21,8 @@ import { FormConfig, FormValue } from '@tmagic/form';
export interface ColumnActionConfig {
type?: 'delete' | 'copy' | 'edit' | string;
buttonType?: string;
display?: (row: any) => boolean;
display?: boolean | ((row: any) => boolean);
disabled?: boolean | ((row: any) => boolean);
text?: string | ((row: any) => string);
name?: string;
tooltip?: string;

View File

@ -2,7 +2,7 @@
<div style="width: 100%">
<NavMenu :data="menu"></NavMenu>
<div class="table-content">
<MagicTable class="left-panel" :columns="columns" :data="data" :show-header="true"></MagicTable>
<MagicTable class="left-panel" :columns="columns" :data="data" :show-header="true" rowkey-name="a"></MagicTable>
<TMagicTabs class="right-panel" modelValue="columns">
<TMagicTabPane label="columns" name="columns">
<TMagicCodeEditor class="code-editor-content" :init-values="columns" @save="change"></TMagicCodeEditor>
@ -41,6 +41,21 @@ const columns = ref<ColumnConfig[]>([
prop: 'a',
label: '1231',
},
{
label: '操作',
actions: [
{
type: 'delete',
buttonType: 'danger',
disabled: (row) => row.a === 'a1',
display: (row) => row.a !== 'b1',
text: '删除',
handler: (row) => {
console.log(row);
},
},
],
},
]);
const data = ref([
@ -52,6 +67,22 @@ const data = ref([
},
],
},
{
a: 'b1',
b: [
{
a: 2,
},
],
},
{
a: 'c2',
b: [
{
a: 3,
},
],
},
]);
const menu: MenuButton[] = [