158 lines
3.4 KiB
Vue
158 lines
3.4 KiB
Vue
<template>
|
|
<el-table
|
|
@selection-change="handleSelectionChange"
|
|
ref="table"
|
|
border
|
|
:header-cell-style="{
|
|
background: '#f5f7fa',
|
|
}"
|
|
:data="tableData"
|
|
style="width: 100%; margin-top: 20px"
|
|
height="650"
|
|
size="mini"
|
|
:row-key="getRowKeys"
|
|
|
|
>
|
|
<el-table-column
|
|
:selectable="selectable"
|
|
type="selection"
|
|
width="55">
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="column.label !== 'id'"
|
|
align="left"
|
|
v-for="(column, index) in tableColumns"
|
|
:key="index"
|
|
:prop="column.prop"
|
|
:label="column.label"
|
|
width="auto"
|
|
></el-table-column>
|
|
<el-table-column align="left" prop="zip" label="操作" width="160">
|
|
<template slot-scope="scope">
|
|
<!-- <el-button
|
|
@click="handleEdit(scope.row)"
|
|
class="el-icon-edit"
|
|
type="text"
|
|
size="small"
|
|
>编辑</el-button
|
|
>
|
|
|
|
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
|
<el-button
|
|
slot="reference"
|
|
style="margin-left: 10px; color: red"
|
|
class="el-icon-delete"
|
|
type="text"
|
|
size="small"
|
|
>删除</el-button
|
|
>
|
|
</el-popconfirm> -->
|
|
|
|
<el-button
|
|
v-if="scope.row.success == '失败'"
|
|
@click="afreshClick(multipleSelection)"
|
|
style="margin-left: 10px;"
|
|
class="el-icon-refresh-left"
|
|
type="text"
|
|
size="small"
|
|
>重试</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
columns: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
data: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
deleteFunc: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
editFunc: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
afreshFunc: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
afreshAllFunc: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
name: "CommonTables",
|
|
data() {
|
|
return {
|
|
multipleSelection: []
|
|
};
|
|
},
|
|
methods: {
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val.map(item =>{
|
|
return item.id
|
|
})
|
|
this.afreshAllFunc(this.multipleSelection)
|
|
},
|
|
// 删除事件
|
|
handleDelete(row) {
|
|
this.deleteFunc(row);
|
|
},
|
|
// 编辑事件
|
|
handleEdit(row) {
|
|
console.log(row);
|
|
this.editFunc(row);
|
|
},
|
|
afreshClick(row) {
|
|
this.afreshFunc(row);
|
|
},
|
|
getRowKeys(row){
|
|
return row.id
|
|
},
|
|
selectable(row, index) {
|
|
if (row.success == '失败' ) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
tableColumns() {
|
|
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
|
return this.columns.map((column) => {
|
|
return {
|
|
label: column.label,
|
|
prop: column.prop,
|
|
};
|
|
});
|
|
},
|
|
tableData() {
|
|
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
|
return this.data.map((rowData) => {
|
|
let row = {};
|
|
for (let column of this.columns) {
|
|
row[column.prop] = rowData[column.prop];
|
|
}
|
|
return row;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.s {
|
|
color: red;
|
|
}
|
|
</style>
|