表格
说明：
1、return里面放table的数据（:data=”tableData”）,el-table-column里面的prop属性即为表格里面要添加的数据、label为表头的内容<br />
2、summary-method、show-summary属性为合计功能，不需要删除即可<br />
3、el-table-column type属性为selection 是复选框，不需要删除即可<br />
4、el-table上的 height="400" 属性控制表格的高度（超出高度出现滚动条）<br />
5、如不需要边框去掉最外层div style里面的border: 1px solid #ccc;即可<br />
6、el-table-column 上的width属性控制表格列的宽度，不设置width列表自动平分<br />
7、el-table-column 上的label为每一列的表头<br />
8、el-table-column 上的prop为每一列的数据，如果需要自定义内容（按钮）就把prop删掉<br />
9、内容居中 在el-table-column上设置align="center"<br />
10、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左<br />
11、事件说明：
@row-contextmenu="rowContextmenu" -- 鼠标右键点击会触发该事件
@cell-dblclick="cellClick" -- 单元格被双击击时会触发该事件
@row-click="rowClick" -- 行被点击时会触发该事件
12、删除时或者执行某些事件的时候，需要获取当前行的数据信息，在方法中传入此行的信息即可（例如：在自定义模板中有删除按钮，在调用删除的方法的时候，传入 scope.row 即可）<br />
13、表格编辑：
A、页面加载完毕在table数据中添加 edit -- true/false 属性用来控制编辑框的显示隐藏（如果是接口调用数据，在返回数据后执行此操作）
this.tableData.map(v => {this.$set(v, 'edit', false)})
B、row-contextmenu 事件里面改变edit的值来显示编辑框（edit = true）
C、keepTable 事件里面改变edit的值来隐藏编辑框 （edit = false 还可以在方法里执行自定义保存方法）
D、在需要编辑的项上添加自定义模板，删除 el-table-column 上的 prop绑定值属性（输入框input的绑定值需要改成修改项的值，展示span的值也要修改成修改项的值）
<template slot-scope="scope">
<div style="width: 100%;text-align: center;" v-if="scope.row.edit">
<el-input v-model="scope.row.name" placeholder="请输入内容" size="mini"></el-input>
</div>
<div style="width: 100%;text-align: center;" v-else>
<span>{{scope.row.name}}</span>
</div>
</template>
14、this.menuIsShow = false / true 控制右键按钮的显示隐藏<br />
15、弹出层编辑传值问题 -- 点击编辑按钮按照示例把当前行数据赋值给弹出层里面的form表单即可（注意字段名的对应）<br />
16、表格最后的按钮，如果要根据条件进行显示隐藏某一个按钮，在按钮上添加 v-if 判断即可<br />
例：(定义变量show show = true 显示删除按钮)
<el-button type="danger" size="mini" v-if="show">删除</el-button>
<div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;">
<el-table
:data="tableData"
tooltip-effect="dark"
:summary-method="getSummaries"
show-summary
height="400"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="45">
</el-table-column>
<el-table-column
width="50"
align="center"
type="index"
label="序号">
</el-table-column>
<el-table-column
align="center"
prop="number"
label="项目编号"
show-overflow-tooltip
width="120">
</el-table-column>
<el-table-column
align="center"
label="项目名称"
show-overflow-tooltip
width="200">
<template slot-scope="scope">
<div style="width: 100%;text-align: center;" v-if="scope.row.edit">
<el-input v-model="scope.row.name" placeholder="请输入内容" size="mini"></el-input>
</div>
<div style="width: 100%;text-align: center;" v-else>
<span>{{scope.row.name}}</span>
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="object"
label="项目类型"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
prop="state"
label="项目状态"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
prop="initiator"
label="立项人"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
width="100"
prop="trackingPeople"
label="项目跟踪人"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
prop="company"
label="建设单位"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
prop="beginTime"
label="开始时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="endTime"
align="center"
label="结束时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
prop="engineerinCost"
label="工程造价"
show-overflow-tooltip>
</el-table-column>
<el-table-column
align="center"
width="300"
label="操作">
<template slot-scope="scope">
<div style="text-align: center;">
<el-row>
<el-col :span="8">
<el-button v-if="scope.row.edit" type="primary" size="mini" @click="keepTable(scope.row)">保存修改</el-button>
<el-button v-else type="primary" size="mini" @click="scope.row.edit=!scope.row.edit">自身编辑</el-button>
</el-col>
<el-col :span="8"><el-button type="primary" size="mini" @click="popUpEdit(scope.row)">弹框编辑</el-button></el-col>
<el-col :span="8"><el-button type="danger" size="mini">删除</el-button></el-col>
</el-row>
</div>
</template>
</el-table-column>
</el-table>
<div style="position: absolute;bottom:0;left: 10px;">
<paging :size-change="handleSizeChange"
:current-change="handleCurrentChange"
:page-sizes="pageSizes"
:page-num="pageNum"
:total-num="totalNum">
</paging>
</div>
<!--编辑弹出层 begin-->
<el-dialog title="表格编辑" :visible.sync="dialogTableEdit" top="60px">
<div class="overflowY" style="height: 330px;padding-right: 15px;">
<el-form :inline="true" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small">
<el-row>
<el-col :span="24">
<el-form-item label="项目名称 : " prop="itmeName">
<el-input size="small" v-model="ruleForm.name" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="开始时间 : " prop="itmeName">
<el-date-picker
v-model="ruleForm.beginTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="结束时间 : " prop="itmeName">
<el-date-picker
v-model="ruleForm.endTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="text-align: right;">
<el-button @click="dialogTableEdit = false">取 消</el-button>
<el-button type="primary" @click="btnClickFun">确 定</el-button>
</div>
</el-dialog>
</div>
import paging from '@/components/demoAssembly/paging'
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
data() {
return {
ruleForm: {},
rowIndex: 0,
dialogTableEdit: false,
pageSizes: [10, 20, 30, 40],
pageNum: 10,
totalNum: 50,
handleSizeChange() {
alert('pageSize 改变时触发')
},
handleCurrentChange() {
alert('currentPage 改变时会触发')
},
tableData: [
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
},
{
number: '12345678',
date: '2016-05-03',
name: '项目名称1',
object: '项目类型1',
state: '开始',
initiator: '张三',
trackingPeople: '李四',
company: 'xxx单位',
beginTime: '2016/01/02',
endTime: '2016/02/03',
engineerinCost: '250000'
}
]
}
},
components: {
paging,
BaseCard
},
mounted() {
this.tableData.map(v => {
this.$set(v, 'edit', false)
})
},
methods: {
handleSelectionChange(val) { // 当选择项发生变化时会触发该事件,val返回选中行
},
getSummaries(param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 1) {
sums[index] = '合计'
return
}
const values = data.map(item => Number(item[column.property]))
if (column.property === 'engineerinCost') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
// sums[index] += ' 元'
} else {
sums[index] = ''
}
})
return sums
},
keepTable(row) { // 点击编辑保存按钮执行的function
row.edit = false
},
popUpEdit(row) { // 点击弹框编辑按钮执行的function
this.dialogTableEdit = true
this.ruleForm = row
},
btnClickFun() { // 点击弹出层修改确认按钮执行的function
// 在此方法里面执行调用保存接口完成修改数据保存 然后刷新数据
this.dialogTableEdit = false
}
}
}