闲暇时间记录一下项目中用到的框架及实现思路，留作笔记
vue的element-ui框架table的使用
elementui中table宽度自适应的问题
- 文章地址https://blog.csdn.net/qq_19694913/article/details/81144314
- BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。
- Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段
- 解决方案：可以将设置了flex属性的容器设置position:relative，然后在子元素加多一层div包裹内容，设置position:absolute; width:100%;继承父级宽度，那么内容也会继承该div的宽度了。
table增删改查
- align=”center”居中
- width=”50”单元格宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180<el-table
:data="tableData"
height="calc(100% - 45px)"
v-loading="listLoading"
@selection-change="selsChange"
highlight-current-row
style="width: 100%">
<el-table-column
type="selection"
width="50">
</el-table-column>
<el-table-column
label="序号"
type="index"
align="center"
width="60">
</el-table-column>
<el-table-column
prop="riskLevel"
label="隐患等级"
:formatter="formatterLevel"
align="center">
</el-table-column>
</el-table-column>
<el-table-column
prop="findDate"
width="170"
align="center"
:formatter='formatterFindDate'
label="发现日期">
</el-table-column>
<el-table-column fixed="right" label="操作" width="130" align="center">
<template slot-scope="scope">
<span @click="editDialog(scope.row)">
<i class="icon iconfont iconColor"></i>
</span>
</template>
</el-table-column>
</el-table>
<el-row type="flex" justify="center" style="height: 45px">
<el-pagination
style="margin: 5px"
@size-change="sizeChange"
@current-change="pageChange"
:current-page="pageData.pageIndex"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total">
</el-pagination>
</el-row>
<script>
export default {
data() {
return {
queryItem:{},
listLoading: false,
tableData: [],
pageData: {
pageIndex: 1,
total: 0,
pageSize: 10,
type: '1',//类型
},
dialogTit: '新增',
formType: '',
addForm: {},
selectData:[],//多选数据
dialogFormVisible:false,
levelOptions:[]
}
},
methods:{
addDialog(){
this.dialogTit = '新增';
this.formType = 'add';
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs.addForm.clearValidate();//清空表单验证规则
});
for (let x in this.addForm) {
this.addForm[x] = ''
}
},
editDialog(row){
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs.form.clearValidate()
})
this.formType = 'edit'
let temp = {}
temp = Object.assign(temp, row)
this.addForm = temp
},
//删除
remove() {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.selectData.length >= 1) {
var ids = this.selectData.map(item => item.id).toString();
this.$post('security', 'deleteRiskRecord', {ids}).then(res => {
if (res.code == 200) {
this.$message({
type: 'success',
message: '删除成功'
});
this.getList();
} else {
this.$message({
type: 'error',
message: res.msg || '删除失败'
});
}
})
} else {
this.$message({
type: 'error',
message: '至少选择一条信息'
});
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
getList() {
temp = Object.assign(temp,this.pageData, this.queryItem);
this.$post('security', 'listRiskRecord', temp).then(res => {
if (res.code == 200) {
this.listLoading = false;
var data = JSON.parse(res.data);
this.tableData = data.records;
this.pageData.pageIndex = data.current;
this.pageData.total = data.total;
this.pageData.pageSize = data.size;
}
})
},
//选择表格列的时候会把数据放到一个数组里 多选
selsChange: function (val) {
this.selectData = val;
},
sizeChange(size) {
this.pageData.pageSize = size;
this.getList();
},
pageChange(current) {
this.pageData.pageIndex = current;
this.getList();
},
formatterFindDate(row, column, cellValue, index) {
let date = new Date(row.findDate)//把定义的时间赋值进来进行下面的转换
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, "0");
let day = date.getDate().toString().padStart(2, "0");
let hours = date.getHours().toString().padStart(2, "0");
let Minutes = date.getMinutes().toString().padStart(2, "0");
let getSeconds = date.getSeconds().toString().padStart(2, "0");
return year + "-" + month + "-" + day + ' ' + hours + ':' + Minutes + ':' + getSeconds
},
//循环跟等级数据字段做匹配
formatterLevel(row, column, cellValue, index){
if (cellValue) {
for (let i = 0; i < this.levelOptions.length; i++) {
if (this.levelOptions[i].code == cellValue) {
return this.levelOptions[i].name;
}
}
}
},
}
}
</scipt>
