mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-10-16 02:36:32 +08:00
feat(table): action支持配置disabled
This commit is contained in:
parent
5387a18024
commit
8809351537
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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[] = [
|
||||
|
Loading…
x
Reference in New Issue
Block a user