diff --git a/src/components/v-table/table-header/readme.md b/src/components/v-table/table-header/readme.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/v-table/table-header/table-header.vue b/src/components/v-table/table-header/table-header.vue
index cf733fb896..3d205bf91c 100644
--- a/src/components/v-table/table-header/table-header.vue
+++ b/src/components/v-table/table-header/table-header.vue
@@ -37,6 +37,7 @@
|
+ |
@@ -85,6 +86,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
+ hasItemAppendSlot: {
+ type: Boolean,
+ default: false,
+ },
},
setup(props, { emit }) {
const dragging = ref(false);
diff --git a/src/components/v-table/table-row/readme.md b/src/components/v-table/table-row/readme.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/v-table/table-row/table-row.vue b/src/components/v-table/table-row/table-row.vue
index 88d73ae888..2159e0f221 100644
--- a/src/components/v-table/table-row/table-row.vue
+++ b/src/components/v-table/table-row/table-row.vue
@@ -25,6 +25,9 @@
|
+
+
+ |
@@ -139,5 +142,10 @@ export default defineComponent({
}
}
}
+
+ .append {
+ display: flex;
+ align-items: center;
+ }
}
diff --git a/src/components/v-table/v-table.story.ts b/src/components/v-table/v-table.story.ts
index 99da81d07d..ef93ddb71b 100644
--- a/src/components/v-table/v-table.story.ts
+++ b/src/components/v-table/v-table.story.ts
@@ -1060,3 +1060,52 @@ export const rowHeight = () => ({
`,
});
+
+export const itemAppendSlot = () => ({
+ data() {
+ return {
+ headers: [
+ {
+ text: 'Name',
+ value: 'name',
+ },
+ {
+ text: 'Phone',
+ value: 'tel',
+ },
+ ],
+ items: [
+ {
+ name: 'Amsterdam',
+ tel: '(020) 333-0987',
+ },
+ {
+ name: 'Beverly Hills',
+ tel: '(123) 333-0987',
+ },
+ {
+ name: 'New Haven',
+ tel: '(203) 687-9900',
+ },
+ {
+ name: 'Hong Kong',
+ tel: '(430) 709-4011',
+ },
+ {
+ name: 'Ahmedabad',
+ tel: '(330) 777-3240',
+ },
+ ],
+ };
+ },
+ template: `
+
+
+ {{ item.name }}
+
+
+ `,
+});
diff --git a/src/components/v-table/v-table.vue b/src/components/v-table/v-table.vue
index 479ce78560..6c9062fe82 100644
--- a/src/components/v-table/v-table.vue
+++ b/src/components/v-table/v-table.vue
@@ -16,6 +16,7 @@
:fixed="fixedHeader"
:show-manual-sort="showManualSort"
:must-sort="mustSort"
+ :has-item-append-slot="hasItemAppendSlot"
@toggle-select-all="onToggleSelectAll"
>
@@ -58,6 +59,10 @@
+
+
+
+
@@ -150,7 +155,7 @@ export default defineComponent({
default: 48,
},
},
- setup(props, { emit, listeners }) {
+ setup(props, { emit, listeners, slots }) {
const _headers = computed({
get: () => {
return props.headers
@@ -203,10 +208,14 @@ export default defineComponent({
},
});
+ const hasItemAppendSlot = computed(() => slots['item-append'] !== undefined);
+
const loadingColSpan = computed(() => {
let length = _headers.value.length + 1; // +1 account for spacer
- if (props.showSelect) length = length + 1;
- if (props.showManualSort) length = length + 1;
+ if (props.showSelect) length++;
+ if (props.showManualSort) length++;
+ if (hasItemAppendSlot.value) length++;
+
return `1 / span ${length}`;
});
@@ -248,6 +257,9 @@ export default defineComponent({
if (props.showManualSort) gridTemplateColumns = 'auto ' + gridTemplateColumns;
gridTemplateColumns = gridTemplateColumns + ' 1fr';
+
+ if (hasItemAppendSlot.value) gridTemplateColumns += ' auto';
+
return gridTemplateColumns;
});
@@ -264,6 +276,7 @@ export default defineComponent({
hasRowClick,
loadingColSpan,
columnStyle,
+ hasItemAppendSlot,
};
function onItemSelected(event: ItemSelectEvent) {