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