|
@@ -1,55 +1,22 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<slot :name="list.name"></slot>
|
|
|
- <el-table
|
|
|
- ref="table"
|
|
|
- style="width: 100%"
|
|
|
- :data="list.data"
|
|
|
- :height="list.height + 'px'"
|
|
|
- :max-height="list.height + 'px'"
|
|
|
- @row-click="getRowData"
|
|
|
- @selection-change="selectionChange"
|
|
|
- :cell-style="columnbackgroundStyle"
|
|
|
- empty-text="暂无数据"
|
|
|
- @cell-click="getRowList"
|
|
|
- >
|
|
|
+ <el-table ref="table" style="width: 100%" :data="list.data" :height="list.height + 'px'"
|
|
|
+ :max-height="list.height + 'px'" @row-click="getRowData" @selection-change="selectionChange"
|
|
|
+ :cell-style="columnbackgroundStyle" empty-text="暂无数据" @cell-click="getRowList">
|
|
|
<!-- 是否多选 -->
|
|
|
- <el-table-column
|
|
|
- v-if="list.isSelection"
|
|
|
- :selecttable="list"
|
|
|
- type="selection"
|
|
|
- :width="100"
|
|
|
- align="center"
|
|
|
- />
|
|
|
+ <el-table-column v-if="list.isSelection" :selecttable="list" type="selection" :width="100" align="center" />
|
|
|
|
|
|
<!-- 是否需要序号 -->
|
|
|
- <el-table-column
|
|
|
- v-if="list.isIndex"
|
|
|
- type="index"
|
|
|
- label="序号"
|
|
|
- width="55"
|
|
|
- align="center"
|
|
|
- />
|
|
|
+ <el-table-column v-if="list.isIndex" type="index" label="序号" width="55" align="center" />
|
|
|
<template v-for="item in list.titledata">
|
|
|
- <el-table-column
|
|
|
- :key="item.prop"
|
|
|
- :prop="item.prop"
|
|
|
- :label="item.label"
|
|
|
- align="center"
|
|
|
- show-overflow-tooltip
|
|
|
- :width="item.width || 100"
|
|
|
- />
|
|
|
+ <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" align="center" show-overflow-tooltip
|
|
|
+ :width="item.width || 100" />
|
|
|
</template>
|
|
|
<!-- 操作列 -->
|
|
|
- <el-table-column
|
|
|
- v-if="list.isOperation"
|
|
|
- v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
|
|
|
- style="margin-right: 20px"
|
|
|
- class-name="handle-td"
|
|
|
- label-class-name="tc"
|
|
|
- :label="list.operation.label"
|
|
|
- align="center"
|
|
|
- >
|
|
|
+ <el-table-column v-if="list.isOperation" v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
|
|
|
+ style="margin-right: 20px" class-name="handle-td" label-class-name="tc" :label="list.operation.label"
|
|
|
+ align="center">
|
|
|
<!-- UI统一一排放3个,4个以上出现更多 -->
|
|
|
<template slot-scope="scope">
|
|
|
<!-- 三个一排的情况,去掉隐藏的按钮后的长度 -->
|
|
@@ -57,23 +24,15 @@
|
|
|
<div class="btn">
|
|
|
<div v-for="item in list.operation.data" :key="item.label">
|
|
|
<template v-if="item.type !== 'icon'">
|
|
|
- <el-button
|
|
|
- v-bind="item"
|
|
|
- :type="item.type ? item.type : ''"
|
|
|
- size="mini"
|
|
|
- @click.native.prevent="
|
|
|
- item.handleRow(scope.$index, scope.row, item.label)
|
|
|
- "
|
|
|
- >
|
|
|
+ <el-button v-bind="item" :type="item.type ? item.type : ''" size="mini" @click.native.prevent="
|
|
|
+ item.handleRow(scope.$index, scope.row, item.label)
|
|
|
+ ">
|
|
|
{{ item.label }}
|
|
|
</el-button>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <i
|
|
|
- :class="[icon, item.icon]"
|
|
|
- v-bind="item"
|
|
|
- @click="item.handleRow(scope.$index, scope.row, item.label)"
|
|
|
- />
|
|
|
+ <i :class="[icon, item.icon]" v-bind="item"
|
|
|
+ @click="item.handleRow(scope.$index, scope.row, item.label)" />
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -82,17 +41,10 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="page">
|
|
|
- <el-pagination
|
|
|
- style="display: flex; flex-direction: row-reverse"
|
|
|
- v-if="list.pageData.total > 0"
|
|
|
- :current-page.sync="page"
|
|
|
- :page-sizes="list.pageData.pageSizes ? list.pageData.pageSizes : [10]"
|
|
|
- :page-size="list.pageData.pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="list.pageData.total"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
+ <el-pagination style="display: flex; flex-direction: row-reverse" v-if="list.pageData.total > 0"
|
|
|
+ :current-page.sync="page" :page-sizes="list.pageData.pageSizes ? list.pageData.pageSizes : [10]"
|
|
|
+ :page-size="list.pageData.pageSize" layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="list.pageData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -116,7 +68,7 @@ export default {
|
|
|
// this.columnbackgroundStyle()
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log(this.list);
|
|
|
+ console.log(this.list);
|
|
|
},
|
|
|
methods: {
|
|
|
columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
|
|
@@ -124,15 +76,15 @@ export default {
|
|
|
// console.log(column);
|
|
|
// console.log(rowIndex);
|
|
|
// console.log(columnIndex);
|
|
|
- if(column.type == 'default'){
|
|
|
- if(column.label === '需求名称'){
|
|
|
+ if (column.type == 'default') {
|
|
|
+ if (column.label === '需求名称') {
|
|
|
return 'color:#0682CD;'
|
|
|
}
|
|
|
}
|
|
|
- // if (columnIndex == 1) {
|
|
|
- // //让下标为1的列数背景颜色显示为红色(颜色自定义根据大家需求来)
|
|
|
- // return 'color:#0682CD;'
|
|
|
- // }
|
|
|
+ // if (columnIndex == 1) {
|
|
|
+ // //让下标为1的列数背景颜色显示为红色(颜色自定义根据大家需求来)
|
|
|
+ // return 'color:#0682CD;'
|
|
|
+ // }
|
|
|
},
|
|
|
selectionChange(val) {
|
|
|
//多选数字回调
|
|
@@ -141,7 +93,7 @@ export default {
|
|
|
handleAdd(name) {
|
|
|
this.$emit("toolMsg", name);
|
|
|
},
|
|
|
- handleRow(index, row, lable) {},
|
|
|
+ handleRow(index, row, lable) { },
|
|
|
handleSizeChange(val) {
|
|
|
this.$emit("changeSize", val);
|
|
|
console.log(`每页 ${val} 条`);
|
|
@@ -162,4 +114,8 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+.btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
</style>
|