Skip to content

V
vue-gjjs
Commit 1fa2aa7a by zhengxiaokui
Options

edittable

parent b86e001b
Showing with 202 additions and 122 deletions
src/components/Table.vue
<template> <template>
<div class="eContainer-table-block"> <div class="eContainer-table-block">
<el-table :id="tableRef" :data="list" ref="table" style="width: 100%" class="eContainer-table" :header-cell-style="{background: 'eef1f6', color: '#606266'}" <el-table
v-bind="$attrs" v-on="tableListeners" v-loading="loading" :row-class-name="tableRowClass" :max-height="maxHeight" :id="tableRef"
> :data="list"
ref="table"
style="width: 100%"
class="eContainer-table"
:header-cell-style="{ background: 'eef1f6', color: '#606266' }"
v-bind="$attrs"
v-on="tableListeners"
v-loading="loading"
:max-height="maxHeight"
>
<el-table-column <el-table-column
v-for="(item, key) in columnsConfig" v-for="(item, key) in columnsConfig"
:key="key" :key="key"
...@@ -13,7 +22,7 @@ ...@@ -13,7 +22,7 @@
<el-pagination <el-pagination
class="eContainer-pagination" class="eContainer-pagination"
v-if="paginationShow" v-if="paginationShow"
:background="type=='small'? false: true" :background="type == 'small' ? false : true"
small small
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
:page-size="limit" :page-size="limit"
...@@ -21,7 +30,9 @@ ...@@ -21,7 +30,9 @@
:total="total" :total="total"
v-on="$listeners" v-on="$listeners"
></el-pagination> ></el-pagination>
<div class="paginationLable" v-if="paginationShow">当前显示第 {{page1}}-{{page2}} 条，共 {{total}} 条</div> <div class="paginationLable" v-if="paginationShow">
当前显示第 {{ page1 }}-{{ page2 }} 条，共 {{ total }} 条
</div>
</div> </div>
</template> </template>
...@@ -30,146 +41,152 @@ export default { ...@@ -30,146 +41,152 @@ export default {
props: { props: {
type: { type: {
type: String, type: String,
default: 'normal' default: "normal",
}, },
list: { list: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
columnsConfig: { columnsConfig: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
total: { total: {
type: Number, type: Number,
default: 0 default: 0,
}, },
current: { current: {
type: Number, type: Number,
default: 0 default: 0,
}, },
limit: { limit: {
type: Number, type: Number,
default: 0 default: 0,
}, },
outerHeight: { outerHeight: {
type: Number, type: Number,
default: undefined default: undefined,
}, },
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
tableRowClassName: { tableRowClassName: {
type: Function type: Function,
}, },
maxHeight:{ maxHeight: {
type: String, type: String,
default:undefined default: undefined,
}, },
paginationShow: { paginationShow: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true default: true,
} },
}, },
data(){ data() {
return{ return {
page1:'', page1: "",
page2:'', page2: "",
tableListeners: {}, tableListeners: {},
tableRef: 'tableRef' + Math.floor(Math.random() * 100) tableRef: "tableRef" + Math.floor(Math.random() * 100),
} };
}, },
watch: { watch: {
'current': function () { current: function () {
this.getPageNum() this.getPageNum();
}, },
'outerHeight': function () { outerHeight: function () {
if (this.outerHeight !== undefined) { if (this.outerHeight !== undefined) {
window.removeEventListener('resize', this.handleResizeBind) window.removeEventListener("resize", this.handleResizeBind);
this.clientHeight = `${document.documentElement.clientHeight}` this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed() this.changeFixed();
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight) this.handleResizeBind = this.handleResize.bind(
window.addEventListener('resize', this.handleResizeBind) this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
} }
} },
}, },
created() { created() {
this.getPageNum() this.getPageNum();
this.tableListeners = {...this.$listeners} this.tableListeners = { ...this.$listeners };
delete this.tableListeners['current-change'] //delete this.tableListeners["current-change"];
}, },
mounted() { mounted() {
if (this.outerHeight) { if (this.outerHeight) {
this.clientHeight = `${document.documentElement.clientHeight}` this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed() this.changeFixed();
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight) this.handleResizeBind = this.handleResize.bind(
window.addEventListener('resize', this.handleResizeBind) this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
} }
}, },
methods: { methods: {
changeFixed() { changeFixed() {
let content = document.getElementById(this.tableRef) let content = document.getElementById(this.tableRef);
let clientHeight = `${document.documentElement.clientHeight}` let clientHeight = `${document.documentElement.clientHeight}`;
let target let target;
for (let i = 0; i < content.children.length; i++) { for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) { if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i] target = content.children[i];
} }
} }
target.style.maxHeight = clientHeight - this.outerHeight + 'px' target.style.maxHeight = clientHeight - this.outerHeight + "px";
}, },
handleResize: (tableRef, outerHeight) => { handleResize: (tableRef, outerHeight) => {
let content = document.getElementById(tableRef) let content = document.getElementById(tableRef);
let clientHeight = `${document.documentElement.clientHeight}` let clientHeight = `${document.documentElement.clientHeight}`;
let target let target;
for (let i = 0; i < content.children.length; i++) { for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) { if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i] target = content.children[i];
} }
} }
target.style.maxHeight = clientHeight - outerHeight + 'px' target.style.maxHeight = clientHeight - outerHeight + "px";
}, },
getPageNum(){ getPageNum() {
if( this.current == Math.ceil(this.total/this.limit)){ if (this.current == Math.ceil(this.total / this.limit)) {
this.page1 = this.current*this.limit-this.limit + 1 this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.total this.page2 = this.total;
}else{ } else {
this.page1 = this.current*this.limit-this.limit + 1 this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.current*this.limit this.page2 = this.current * this.limit;
} }
}, },
tableRowClass: function ({row, rowIndex}) { tableRowClass: function ({ row, rowIndex }) {
if (this.tableRowClassName) { if (this.tableRowClassName) {
return this.tableRowClassName({row, rowIndex}) return this.tableRowClassName({ row, rowIndex });
} else { } else {
return '' return "";
} }
} },
}, },
destroyed: function () { destroyed: function () {
if (this.outerHeight) { if (this.outerHeight) {
window.removeEventListener('resize', this.handleResizeBind) window.removeEventListener("resize", this.handleResizeBind);
} }
}, },
};
}
</script> </script>
<style> <style>
.eContainer-table-block .paginationLable{ .eContainer-table-block .paginationLable {
font-size: 12px; font-size: 12px;
color: #808080; color: #808080;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
float:right; float: right;
margin-top:20px; margin-top: 20px;
} }
.eContainer-table-block .el-table__body-wrapper { .eContainer-table-block .el-table__body-wrapper {
overflow: auto; overflow: auto;
......
src/model/Letopn/index.js
...@@ -315,18 +315,7 @@ export default class Letopn { ...@@ -315,18 +315,7 @@ export default class Letopn {
seainf: "", // .trnmod.trndoc.rcvatt.seainf seainf: "", // .trnmod.trndoc.rcvatt.seainf
}, },
filrecv: "", // File Receiver .trnmod.trndoc.filrecv filrecv: "", // File Receiver .trnmod.trndoc.filrecv
doceot: [ doceot: [],
{
rol: '323232323',
nam: 'wangxueqin',
address: 'beijing',
},
{
rol: '323232323',
nam: 'zhengxiaokui',
address: 'beijing',
},
],
}, },
}, },
liaall: { liaall: {
......
src/views/Public/EditTable.vue
<template> <template>
<c-col :span="22" style="margin-bottom: 18px" :offset="1"> <c-row>
<c-table <c-col :span="22" style="margin-bottom: 18px" :offset="1">
style="text-align: center" <c-table
:list="dataSource" style="text-align: center"
:paginationShow="paginationShow" :ref="urls"
:border="border" :list="dataSource"
> :paginationShow="paginationShow"
<template v-for="item in columns"> :border="border"
<el-table-column :highlight-current-row="highlight"
:label="item.title" :row-class-name="tableRowClassName"
:prop="item.dataIndex" @row-click="handleClick"
:min-width="item.width" >
:key="item.dataIndex" <el-table-column type="index" width="50"> </el-table-column>
> <template v-for="item in columns">
<template slot-scope="scope"> <el-table-column
<el-select :label="item.title"
v-if="item.show === 'select'" :min-width="item.width"
v-model="scope.row[item.dataIndex]" :key="item.dataIndex"
:code="item.code" >
></el-select> <template slot-scope="scope">
<el-input <el-select
v-else-if="item.show === 'input'" v-if="item.show === 'select'"
v-model="scope.row[item.dataIndex]" v-model="scope.row[item.dataIndex]"
:placeholder="`请输入${item.title}`" :code="item.code"
></el-input> ></el-select>
<span v-else>{{ scope.row[item.dataIndex] }}</span> <el-input
</template> v-else-if="item.show === 'input'"
</el-table-column> v-model="scope.row[item.dataIndex]"
</template> :placeholder="`请输入${item.title}`"
</c-table> ></el-input>
</c-col> <span v-else>{{ scope.row[item.dataIndex] }}</span>
</template>
</el-table-column>
</template>
<slot></slot>
</c-table>
</c-col>
<c-col :span="1">
<div class="button_contains">
<span class="add_del_button add_button" @click="handleAdd">+</span>
<span class="add_del_button" @click="handleDelete">-</span>
</div>
</c-col>
</c-row>
</template> </template>
<script> <script>
import Api from "~/service/Api"; import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess"; import CommonProcess from "~/mixin/CommonProcess";
import _ from "~/utils/Lodash.js"; import _ from "~/utils/Lodash.js";
import Col from "../../components/Col.vue";
export default { export default {
components: { Col },
inject: ["root"], inject: ["root"],
mixins: [CommonProcess], mixins: [CommonProcess],
data() { data() {
return { return {
dataSource: _.get(this.model, this.urls, []), dataSource: _.get(this.model, this.urls, []),
rowIndex: null,
}; };
}, },
...@@ -64,7 +80,6 @@ export default { ...@@ -64,7 +80,6 @@ export default {
}, },
}, },
paginationShow: { paginationShow: {
//名称地址是否灰显
type: Boolean, type: Boolean,
default: false, default: false,
}, },
...@@ -74,7 +89,12 @@ export default { ...@@ -74,7 +89,12 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
highlight: {
type: Boolean,
default: true,
},
}, },
computed: {},
watch: { watch: {
dataSource: { dataSource: {
...@@ -86,10 +106,63 @@ export default { ...@@ -86,10 +106,63 @@ export default {
deep: true, deep: true,
}, },
}, },
methods: {}, methods: {
//获取表格数据索引，方便删除
tableRowClassName({ row, rowIndex }) {
row.row_index = rowIndex;
},
//记录选中行索引
handleClick(row, column, event) {
this.rowIndex = row.row_index;
console.log(this.rowIndex);
},
handleAdd() {
let arr = {};
for (let it of this.columns) {
arr[it.dataIndex] = "";
}
this.dataSource.push({ ...arr });
},
handleDelete() {
if (this.rowIndex === null) {
this.rowIndex = this.dataSource[this.dataSource.length - 1].row_index; //没有选中删除最后一行
}
this.dataSource.splice(this.rowIndex, 1);
this.rowIndex = null;
//this.$refs[this.urls].clearSelection();
},
},
created: function () {}, created: function () {},
}; };
</script> </script>
<style> <style>
.button_contains {
margin-top: 18px;
margin-left: 2px;
display: flex;
flex-direction: column;
text-align: right;
}
.add_del_button {
display: block;
height: 15px;
width: 26px;
flex: 0;
line-height: 15px;
text-align: center;
font-size: 12px;
border-radius: 5px;
border: 1px solid rgb(194, 192, 192);
background-color: rgb(240, 240, 240);
}
.add_button {
margin-bottom: 2px;
}
.add_del_button:hover {
cursor: pointer;
background-color: rgb(230, 227, 227);
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment