feat: ✨ 新增表格操作列自适应组件
This commit is contained in:
XFeng
91
src/components/OperationColumn/index.vue
Normal file
91
src/components/OperationColumn/index.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<el-table-column
|
||||||
|
:label="label"
|
||||||
|
:fixed="fixed"
|
||||||
|
:align="align"
|
||||||
|
:show-overflow-tooltip="showOverflowTooltip"
|
||||||
|
:width="finalWidth"
|
||||||
|
>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div v-auto-width class="operation-buttons">
|
||||||
|
<slot :row="row"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
listDataLength: number;
|
||||||
|
prop?: string;
|
||||||
|
label?: string;
|
||||||
|
fixed?: string;
|
||||||
|
align?: string;
|
||||||
|
width?: number;
|
||||||
|
showOverflowTooltip?: boolean;
|
||||||
|
minWidth?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
align: "center",
|
||||||
|
minWidth: 80,
|
||||||
|
});
|
||||||
|
|
||||||
|
const count = ref(0);
|
||||||
|
const operationWidth = ref(props.minWidth || 80);
|
||||||
|
|
||||||
|
// 计算操作列宽度
|
||||||
|
const calculateWidth = () => {
|
||||||
|
count.value++;
|
||||||
|
|
||||||
|
if (count.value !== props.listDataLength) return;
|
||||||
|
const maxWidth = getOperationMaxWidth();
|
||||||
|
operationWidth.value = Math.max(maxWidth, props.minWidth);
|
||||||
|
count.value = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算最终宽度
|
||||||
|
const finalWidth = computed(() => {
|
||||||
|
return props.width || operationWidth.value || props.minWidth;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自适应宽度指令
|
||||||
|
const vAutoWidth = {
|
||||||
|
mounted() {
|
||||||
|
// 初次挂载的时候计算一次
|
||||||
|
calculateWidth();
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
// 数据更新时重新计算一次
|
||||||
|
calculateWidth();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取按钮数量和宽带来获取操作组的最大宽度
|
||||||
|
* 注意使用时需要使用 `class="operation-buttons"` 的标签包裹操作按钮
|
||||||
|
* @returns {number} 返回操作组的最大宽度
|
||||||
|
*/
|
||||||
|
const getOperationMaxWidth = () => {
|
||||||
|
const el = document.getElementsByClassName("operation-buttons");
|
||||||
|
|
||||||
|
// 取操作组的最大宽度
|
||||||
|
let maxWidth = 0;
|
||||||
|
let totalWidth: any = 0;
|
||||||
|
Array.prototype.forEach.call(el, (item) => {
|
||||||
|
// 获取每个item的dom
|
||||||
|
const buttons = item.querySelectorAll(".el-button");
|
||||||
|
// 获取每行按钮的总宽度
|
||||||
|
totalWidth = Array.from(buttons).reduce((acc, button: any) => {
|
||||||
|
return acc + button.scrollWidth + 22; // 每个按钮的宽度加上预留宽度
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// 获取最大的宽度
|
||||||
|
if (totalWidth > maxWidth) maxWidth = totalWidth;
|
||||||
|
});
|
||||||
|
|
||||||
|
return maxWidth;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
100
src/views/demo/auto-opreation-column.vue
Normal file
100
src/views/demo/auto-opreation-column.vue
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<!-- 文件上传组件示例 -->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-link
|
||||||
|
href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/auto-opreation-column.vue"
|
||||||
|
type="primary"
|
||||||
|
target="_blank"
|
||||||
|
class="mb-10"
|
||||||
|
>
|
||||||
|
示例源码 请点击>>>>
|
||||||
|
</el-link>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3>自适应表格操作列</h3>
|
||||||
|
<div class="text-14px color-#999">
|
||||||
|
该组件适用于含有操作列的表格。在某些情况下，按钮可能需要根据数据状态或其他条件动态展示，无法预设固定宽度。操作列组件能根据按钮数量自适应宽度，不需要再手动设置宽度。
|
||||||
|
</div>
|
||||||
|
<div class="mt-30px">
|
||||||
|
<el-checkbox v-model="checked1" label="查看" size="large" />
|
||||||
|
<el-checkbox v-model="checked2" label="超过了六个字会怎么样" size="large" />
|
||||||
|
<el-checkbox v-model="checked3" label="新增" size="large" />
|
||||||
|
<el-checkbox v-model="checked4" label="返回很多个字" size="large" />
|
||||||
|
<el-checkbox v-model="checked5" label="编辑" size="large" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" style="width: 100%" border>
|
||||||
|
<el-table-column prop="date" label="Date" />
|
||||||
|
<el-table-column prop="name" label="Name" />
|
||||||
|
<el-table-column prop="state" label="State" />
|
||||||
|
<el-table-column prop="city" label="City" />
|
||||||
|
<el-table-column prop="address" label="Address" />
|
||||||
|
<el-table-column prop="zip" label="Zip" />
|
||||||
|
<OperationColumn :list-data-length="tableData.length">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button v-if="checked1" link type="primary" size="small">查看</el-button>
|
||||||
|
<el-button v-if="checked2" link type="primary" size="small">
|
||||||
|
超过了六个字会怎么样
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="checked3" link type="primary" size="small">新增</el-button>
|
||||||
|
<el-button v-if="checked4" link type="primary" size="small">返回很多个字</el-button>
|
||||||
|
<el-button v-if="checked5" link type="primary" size="small">编辑</el-button>
|
||||||
|
<el-button v-if="row.tag === 'Home'" link type="primary" size="small">默认</el-button>
|
||||||
|
</template>
|
||||||
|
</OperationColumn>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import OperationColumn from "@/components/OperationColumn/index.vue";
|
||||||
|
|
||||||
|
const checked1 = ref(true);
|
||||||
|
const checked2 = ref(false);
|
||||||
|
const checked3 = ref(false);
|
||||||
|
const checked4 = ref(false);
|
||||||
|
const checked5 = ref(false);
|
||||||
|
|
||||||
|
const tableData = ref<any>([]);
|
||||||
|
setTimeout(() => {
|
||||||
|
tableData.value = [
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
state: "California",
|
||||||
|
city: "Los Angeles",
|
||||||
|
address: "No. 189, Grove St, Los Angeles",
|
||||||
|
zip: "CA 90036",
|
||||||
|
tag: "Home",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-02",
|
||||||
|
name: "Tom",
|
||||||
|
state: "California",
|
||||||
|
city: "Los Angeles",
|
||||||
|
address: "No. 189, Grove St, Los Angeles",
|
||||||
|
zip: "CA 90036",
|
||||||
|
tag: "Office",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "Tom",
|
||||||
|
state: "California",
|
||||||
|
city: "Los Angeles",
|
||||||
|
address: "No. 189, Grove St, Los Angeles",
|
||||||
|
zip: "CA 90036",
|
||||||
|
tag: "Home",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "Tom",
|
||||||
|
state: "California",
|
||||||
|
city: "Los Angeles",
|
||||||
|
address: "No. 189, Grove St, Los Angeles",
|
||||||
|
zip: "CA 90036",
|
||||||
|
tag: "Office",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}, 300);
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user