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.
398 lines
9.7 KiB
398 lines
9.7 KiB
<template> |
|
<el-table |
|
:data="tableData" |
|
style="width: 100%" |
|
:show-summary="shownm" |
|
:summary-method="getSummaries" |
|
@selection-change="handleSelectionChange" |
|
> |
|
<!-- <el-table-column type="selection" width="55" /> --> |
|
<!-- <el-table-column label="Address Info"> |
|
<el-table-column prop="" label="State" width="120" /> |
|
</el-table-column> |
|
<el-table-column label="Address Info"> |
|
<el-table-column prop="" label="State" width="120" /> |
|
</el-table-column> |
|
<el-table-column label="Address Info"> |
|
<el-table-column prop="" label="State" width="120" /> |
|
</el-table-column> --> |
|
<el-table-column |
|
:type="column.type == 0 ? 'selection' : ''" |
|
:width="column.width" |
|
v-for="column in columnList" |
|
:key="column.prop" |
|
:prop="column.prop" |
|
:label="column.label" |
|
:fixed="column.fixed" |
|
> |
|
<el-table-column |
|
:width="column.width" |
|
:prop="column.prop" |
|
:label="column.label" |
|
v-if="column.type != 0" |
|
> |
|
<template #header> |
|
<!-- <el-text class="mx-1">{{ column.label }}</el-text> --> |
|
<el-input |
|
v-if="column.type == 2" |
|
v-model="column.values" |
|
:clearable="true" |
|
size="10" |
|
:placeholder="`请输入${column.label}`" |
|
@change="inputchange($event,column)" |
|
@clear="inputclear($event,column)" |
|
/> |
|
<el-select |
|
v-if="column.type == 3" |
|
v-model="column.values" |
|
class="m-2" |
|
:placeholder="`请选择${column.label}`" |
|
size="large" |
|
@change="selectchange($event,column)" |
|
@clear="selectclear($event,column)" |
|
> |
|
<el-option |
|
v-for="item in column.checkarr" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
<el-date-picker |
|
v-model="column.values" |
|
v-if="column.type == 4" |
|
type="date" |
|
:placeholder="`请选择${column.label}`" |
|
@change="timechange($event,column)" |
|
@clear="timeclear($event,column)" |
|
/> |
|
<el-date-picker |
|
v-model="column.values" |
|
v-if="column.type == 5" |
|
type="datetime" |
|
:placeholder="`请选择${column.label}`" |
|
format="YYYY/MM/DD HH:mm:ss" |
|
@change="timechange($event,column)" |
|
@clear="timeclear($event,column)" |
|
/> |
|
</template> |
|
|
|
<template #default="scope"> |
|
<el-text class="mx-2" v-if="Number(column.type)<6&&Number(column.type)>0">{{ scope.row[column.prop] }}</el-text> |
|
<slot v-if="column.type == 6" :scope="scope"></slot> |
|
<!-- <slot v-if="column.type == 7" name="test" :testdata="scope"></slot> --> |
|
<!-- <el-button |
|
v-if="column.type == 6" |
|
size="small" |
|
@click="handleEdit(scope.$index, scope.row)" |
|
>Edit</el-button |
|
> |
|
<el-button |
|
v-if="column.type == 6" |
|
size="small" |
|
type="danger" |
|
@click="handleDelete(scope.$index, scope.row)" |
|
>Delete</el-button |
|
> --> |
|
</template> |
|
</el-table-column> |
|
|
|
<template #header> |
|
<el-text class="mx-1">{{ column.label }}</el-text> |
|
<!-- <el-input |
|
v-if="column.type == 2" |
|
v-model="column.values" |
|
clearable |
|
size="10" |
|
placeholder="Type to search" |
|
/> --> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { computed, ref } from 'vue'; |
|
import type { PropType } from 'vue'; |
|
|
|
/** |
|
* 对应通知事件 |
|
* inputTxt:输入框输入的确认事件 |
|
* timeCheck:时间选择器选择事件 |
|
* selectCheck:下拉框选中事件 |
|
* selection:勾选框事件 |
|
*/ |
|
|
|
interface TableColumnType { |
|
/** 表格列的key */ |
|
prop: string; |
|
/** 表格列的名字 */ |
|
label: string; |
|
/** |
|
* 对应列表头的类型 |
|
* 0:直接显示为单选，prop，label，全部传空 |
|
* 1:普通表格，正常显示 |
|
* 2:带输入框表格 |
|
* 3:带下拉框表格 |
|
* 4:带日期选择器列 |
|
* 5:带日期时间选择器 |
|
* 6:操作栏，prop，label，全部传空 |
|
* 7:测试 |
|
*/ |
|
type: number | string; |
|
/** 用于接受表头的值 */ |
|
values: number | string; |
|
/** 表头宽度 number string undefined */ |
|
width: number | string | undefined; |
|
/** 下拉框可选项 */ |
|
checkarr?: { |
|
value: string | number; |
|
label: string | number; |
|
}[]; |
|
/** 是否固定表头 |
|
* true false |
|
* left right |
|
*/ |
|
fixed: boolean | string; |
|
/** 是否统计 |
|
* true false 或者直接不写该参数 |
|
*/ |
|
isshowSummary?: boolean; |
|
} |
|
interface TableDataType { |
|
[key: string]: any; |
|
} |
|
let props = defineProps({ |
|
columnList: { |
|
type: Array as PropType<TableColumnType[]>, |
|
required: true, |
|
}, |
|
tableData: { |
|
type: Array as PropType<TableDataType[]>, |
|
required: true, |
|
}, |
|
}); |
|
let emit =defineEmits(['inputTxt','timeCheck','selectCheck','selection']) |
|
|
|
// const tableData = ref([ |
|
// { |
|
// id: 1, |
|
// name: '张三', |
|
// age: 20, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// { |
|
// id: 2, |
|
// name: '李四', |
|
// age: 25, |
|
// time:'2022-12-13' |
|
// }, |
|
// // 更多数据... |
|
// ] as TableDataType[]) // 将数据应用到 TableDataType 类型上 |
|
|
|
// let columnList = ref([ |
|
// { |
|
// prop: '', |
|
// label: '', |
|
// type: 0, |
|
// values: '', |
|
// width: 55, |
|
// checkarr:[], |
|
// fixed:true |
|
// }, |
|
// { |
|
// prop: 'id', |
|
// label: 'ID', |
|
// type: 2, |
|
// values: '', |
|
// width: '110', |
|
// checkarr:[], |
|
// fixed:true |
|
// }, |
|
// { |
|
// prop: 'name', |
|
// label: '姓名', |
|
// type: 3, |
|
// values: '', |
|
// width: '170', |
|
// checkarr:[ |
|
// { |
|
// value:'1', |
|
// label:'1' |
|
// }, |
|
// { |
|
// value:'2', |
|
// label:'2' |
|
// }, |
|
// { |
|
// value:'3', |
|
// label:'3' |
|
// } |
|
// ], |
|
// fixed:true |
|
// }, |
|
// { |
|
// prop: 'age', |
|
// label: '年龄', |
|
// type: 2, |
|
// values: '', |
|
// width: '120', |
|
// checkarr:[], |
|
// fixed:false, |
|
// isshowSummary:true |
|
// }, |
|
// { |
|
// prop: 'time', |
|
// label: '时间', |
|
// type: 4, |
|
// values: '', |
|
// width: '260', |
|
// checkarr:[], |
|
// fixed:false |
|
// }, |
|
// { |
|
// prop: 'name', |
|
// label: '收货人', |
|
// type: 2, |
|
// values: '', |
|
// width: '150', |
|
// checkarr:[], |
|
// fixed:false |
|
// }, |
|
// { |
|
// prop: 'name', |
|
// label: '送货司机', |
|
// type: 2, |
|
// values: '', |
|
// width: '180', |
|
// checkarr:[], |
|
// fixed:false |
|
// }, |
|
// { |
|
// prop: '', |
|
// label: '操作', |
|
// type: 5, |
|
// values: '', |
|
// width: '200', |
|
// checkarr:[], |
|
// fixed:'right' |
|
// }, |
|
// // 更多列的配置... |
|
// ] as TableColumnType[]); // 将列配置应用到 TableColumnType 类型上 |
|
let shownm = ref(false); |
|
function handleEdit(index: number, row: TableDataType) { |
|
console.log(index, row); |
|
} |
|
function inputchange(value,column:TableColumnType){ |
|
console.log(value,column) |
|
emit('inputTxt',value,column) |
|
} |
|
function selectchange(value,column:TableColumnType){ |
|
console.log(value,column) |
|
emit('selectCheck',value,column) |
|
} |
|
function timechange(value,column:TableColumnType){ |
|
console.log(value,column) |
|
emit('timeCheck',value,column) |
|
} |
|
const handleSelectionChange=(param:TableDataType[])=>{ |
|
console.log(param) |
|
emit('selection',param) |
|
} |
|
function inputclear(value,column:TableColumnType){ |
|
console.log('',column) |
|
emit('inputTxt','',column) |
|
} |
|
function selectclear(value,column:TableColumnType){ |
|
console.log('',column) |
|
emit('selectCheck','',column) |
|
} |
|
function timeclear(value,column:TableColumnType){ |
|
console.log('',column) |
|
emit('timeCheck','',column) |
|
} |
|
function handleDelete(index: number, row: TableDataType) { |
|
console.log(index, row); |
|
} |
|
const getSummaries = (param: any) => { |
|
const { columns, data } = param; |
|
let newarr = []; |
|
let tji = 0; |
|
console.log(columns, data); |
|
columns.map((item, index) => { |
|
if (index == 0) { |
|
newarr[index] = '总计'; |
|
return; |
|
} |
|
tji = 0; |
|
if (props.columnList[index].isshowSummary) { |
|
data.map(ite => { |
|
tji += Number(ite[props.columnList[index].prop]); |
|
}); |
|
newarr[index] = tji; |
|
// shownm.value=true |
|
} else { |
|
newarr[index] = null; |
|
} |
|
}); |
|
// console.log(columns) |
|
console.log(newarr); |
|
return newarr; |
|
}; |
|
|
|
props.columnList.map(item => { |
|
if (item.isshowSummary) { |
|
shownm.value = true; |
|
} |
|
}); |
|
</script> |
|
<style lang="scss"> |
|
.el-table .warning-row { |
|
--el-table-tr-bg-color: var(--el-color-warning-light-9); |
|
} |
|
.el-table .success-row { |
|
--el-table-tr-bg-color: var(--el-color-success-light-9); |
|
} |
|
</style>
|
|
|