Skip to content

V
vue-gjjs
Commit 1fa2aa7a by zhengxiaokui
Options

edittable

parent b86e001b
Showing with 167 additions and 87 deletions
src/components/Table.vue
<template>
<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'}"
v-bind="$attrs" v-on="tableListeners" v-loading="loading" :row-class-name="tableRowClass" :max-height="maxHeight"
<el-table
: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
v-for="(item, key) in columnsConfig"
......@@ -13,7 +22,7 @@
<el-pagination
class="eContainer-pagination"
v-if="paginationShow"
:background="type=='small'? false: true"
:background="type == 'small' ? false : true"
small
layout="prev, pager, next, jumper"
:page-size="limit"
......@@ -21,7 +30,9 @@
:total="total"
v-on="$listeners"
></el-pagination>
<div class="paginationLable" v-if="paginationShow">当前显示第 {{page1}}-{{page2}} 条，共 {{total}} 条</div>
<div class="paginationLable" v-if="paginationShow">
当前显示第 {{ page1 }}-{{ page2 }} 条，共 {{ total }} 条
</div>
</div>
</template>
......@@ -30,146 +41,152 @@ export default {
props: {
type: {
type: String,
default: 'normal'
default: "normal",
},
list: {
type: Array,
default: () => {
return []
}
return [];
},
},
columnsConfig: {
type: Array,
default: () => {
return []
}
return [];
},
},
total: {
type: Number,
default: 0
default: 0,
},
current: {
type: Number,
default: 0
default: 0,
},
limit: {
type: Number,
default: 0
default: 0,
},
outerHeight: {
type: Number,
default: undefined
default: undefined,
},
loading: {
type: Boolean,
default: false
default: false,
},
tableRowClassName: {
type: Function
type: Function,
},
maxHeight:{
maxHeight: {
type: String,
default:undefined
default: undefined,
},
paginationShow: {
type: Boolean,
required: false,
default: true
}
default: true,
},
},
data(){
return{
page1:'',
page2:'',
data() {
return {
page1: "",
page2: "",
tableListeners: {},
tableRef: 'tableRef' + Math.floor(Math.random() * 100)
}
tableRef: "tableRef" + Math.floor(Math.random() * 100),
};
},
watch: {
'current': function () {
this.getPageNum()
current: function () {
this.getPageNum();
},
'outerHeight': function () {
outerHeight: function () {
if (this.outerHeight !== undefined) {
window.removeEventListener('resize', this.handleResizeBind)
this.clientHeight = `${document.documentElement.clientHeight}`
this.changeFixed()
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight)
window.addEventListener('resize', this.handleResizeBind)
}
window.removeEventListener("resize", this.handleResizeBind);
this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed();
this.handleResizeBind = this.handleResize.bind(
this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
}
},
},
created() {
this.getPageNum()
this.tableListeners = {...this.$listeners}
delete this.tableListeners['current-change']
this.getPageNum();
this.tableListeners = { ...this.$listeners };
//delete this.tableListeners["current-change"];
},
mounted() {
if (this.outerHeight) {
this.clientHeight = `${document.documentElement.clientHeight}`
this.changeFixed()
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight)
window.addEventListener('resize', this.handleResizeBind)
this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed();
this.handleResizeBind = this.handleResize.bind(
this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
}
},
methods: {
changeFixed() {
let content = document.getElementById(this.tableRef)
let clientHeight = `${document.documentElement.clientHeight}`
let target
let content = document.getElementById(this.tableRef);
let clientHeight = `${document.documentElement.clientHeight}`;
let target;
for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) {
target = content.children[i]
if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i];
}
}
target.style.maxHeight = clientHeight - this.outerHeight + 'px'
target.style.maxHeight = clientHeight - this.outerHeight + "px";
},
handleResize: (tableRef, outerHeight) => {
let content = document.getElementById(tableRef)
let clientHeight = `${document.documentElement.clientHeight}`
let target
let content = document.getElementById(tableRef);
let clientHeight = `${document.documentElement.clientHeight}`;
let target;
for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) {
target = content.children[i]
if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i];
}
}
target.style.maxHeight = clientHeight - outerHeight + 'px'
},
getPageNum(){
if( this.current == Math.ceil(this.total/this.limit)){
this.page1 = this.current*this.limit-this.limit + 1
this.page2 = this.total
}else{
this.page1 = this.current*this.limit-this.limit + 1
this.page2 = this.current*this.limit
target.style.maxHeight = clientHeight - outerHeight + "px";
},
getPageNum() {
if (this.current == Math.ceil(this.total / this.limit)) {
this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.total;
} else {
this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.current * this.limit;
}
},
tableRowClass: function ({row, rowIndex}) {
tableRowClass: function ({ row, rowIndex }) {
if (this.tableRowClassName) {
return this.tableRowClassName({row, rowIndex})
return this.tableRowClassName({ row, rowIndex });
} else {
return ''
}
return "";
}
},
},
destroyed: function () {
if (this.outerHeight) {
window.removeEventListener('resize', this.handleResizeBind)
window.removeEventListener("resize", this.handleResizeBind);
}
},
}
};
</script>
<style>
.eContainer-table-block .paginationLable{
.eContainer-table-block .paginationLable {
font-size: 12px;
color: #808080;
height: 26px;
line-height: 26px;
float:right;
margin-top:20px;
float: right;
margin-top: 20px;
}
.eContainer-table-block .el-table__body-wrapper {
overflow: auto;
......
src/model/Letopn/index.js
......@@ -315,18 +315,7 @@ export default class Letopn {
seainf: "", // .trnmod.trndoc.rcvatt.seainf
},
filrecv: "", // File Receiver .trnmod.trndoc.filrecv
doceot: [
{
rol: '323232323',
nam: 'wangxueqin',
address: 'beijing',
},
{
rol: '323232323',
nam: 'zhengxiaokui',
address: 'beijing',
},
],
doceot: [],
},
},
liaall: {
......
src/views/Public/EditTable.vue
<template>
<c-row>
<c-col :span="22" style="margin-bottom: 18px" :offset="1">
<c-table
style="text-align: center"
:ref="urls"
:list="dataSource"
:paginationShow="paginationShow"
:border="border"
:highlight-current-row="highlight"
:row-class-name="tableRowClassName"
@row-click="handleClick"
>
<el-table-column type="index" width="50"> </el-table-column>
<template v-for="item in columns">
<el-table-column
:label="item.title"
:prop="item.dataIndex"
:min-width="item.width"
:key="item.dataIndex"
>
......@@ -28,21 +33,32 @@
</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>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import _ from "~/utils/Lodash.js";
import Col from "../../components/Col.vue";
export default {
components: { Col },
inject: ["root"],
mixins: [CommonProcess],
data() {
return {
dataSource: _.get(this.model, this.urls, []),
rowIndex: null,
};
},
......@@ -64,7 +80,6 @@ export default {
},
},
paginationShow: {
//名称地址是否灰显
type: Boolean,
default: false,
},
......@@ -74,7 +89,12 @@ export default {
type: Boolean,
default: true,
},
highlight: {
type: Boolean,
default: true,
},
},
computed: {},
watch: {
dataSource: {
......@@ -86,10 +106,63 @@ export default {
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 () {},
};
</script>
<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>
\ 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