You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.5 KiB
61 lines
1.5 KiB
2 years ago
|
<template>
|
||
|
|
<el-table :data="tableData" @selection-change="selectionChange">
|
||
|
|
<el-table-column
|
||
|
|
:prop="item.prop"
|
||
|
|
:label="item.label"
|
||
|
|
:width="item.width"
|
||
|
|
v-for="(item, index) in tableColumn"
|
||
|
|
:key="index"
|
||
|
|
/>
|
||
|
|
<el-table-column fixed="right" label="操作" width="220" v-if="operations">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button type="primary" link size="small" @click="editClick(scope.row)" v-if="hasEdit">编辑</el-button>
|
||
|
|
<el-button type="primary" link size="small" @click="delClick(scope.row)" v-if="hasDel">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
//表格字段类型
|
||
|
|
interface columnType {
|
||
|
|
prop: string;
|
||
|
|
label: string;
|
||
|
|
width?: string|undefined;
|
||
|
|
}
|
||
|
|
defineProps({
|
||
|
|
tableColumn: Array<columnType>, //表格字段
|
||
|
|
tableData: Array, //表格数据
|
||
|
|
operations: {
|
||
|
|
//操作是否显示
|
||
|
|
type: Boolean, // 参数类型
|
||
|
|
default: false //默认值
|
||
|
|
},
|
||
|
|
hasEdit: {
|
||
|
|
//修改是否显示
|
||
|
|
type: Boolean, // 参数类型
|
||
|
|
default: false //默认值
|
||
|
|
},
|
||
|
|
hasDel: {
|
||
|
|
//删除是否显示
|
||
|
|
type: Boolean, // 参数类型
|
||
|
|
default: false //默认值
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const emit = defineEmits(['editClick', 'delClick']);
|
||
|
|
//多选
|
||
|
|
const selectionChange = (row: any) => {
|
||
|
|
emit('delClick', row);
|
||
|
|
};
|
||
|
|
//修改
|
||
|
|
const editClick = (row: any) => {
|
||
|
|
emit('editClick', row);
|
||
|
|
};
|
||
|
|
//删除
|
||
|
|
const delClick = (row: any) => {
|
||
|
|
emit('delClick', row);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|