流程中心表格列渲染bug修改,自适应宽度

This commit is contained in:
yuekuo
2023-04-14 16:18:19 +08:00
parent 4ed0752b86
commit f4da0e5edb
4 changed files with 253 additions and 446 deletions
@@ -1,130 +1,72 @@
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
border
:header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
>
<el-table-column
prop="processId"
label="流程编号"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="now"
label="当前处理人"
width="190"
align="center"
>
</el-table-column>
<el-table-column
prop="last"
label="上一处理人"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="endTime"
label="完成时间"
width="170"
sortable
align="center"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="125"
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope" >
<el-button
@click.native.prevent="view(scope.$index, tableData)"
type="text"
size="small"
>
<span>查看</span>
</el-button>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData" style="width: 100%" border
:header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
<el-table-column prop="processId" label="流程编号" align="center">
</el-table-column>
<el-table-column prop="processName" label="流程名称" align="center">
</el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="now" label="当前处理人" align="center">
</el-table-column>
<el-table-column prop="last" label="上一处理人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column prop="endTime" label="完成时间" sortable align="center">
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
查看
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'monitorProcess',
data() {
return {
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-1'
}, {
processId: '2016-05-2',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-2'
}, {
processId: '2016-05-3',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-3'
}, {
processId: '2016-05-4',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime:'2023-1-4'
}]
}
export default {
name: 'monitorProcess',
data() {
return {
tableData: [{
processId: '2016-05-1',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime: '2023-1-1'
}, {
processId: '2016-05-2',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime: '2023-1-2'
}, {
processId: '2016-05-3',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime: '2023-1-3'
}, {
processId: '2016-05-4',
processName: '王小虎',
processPerson: '上海市普陀区金沙江路 1518 弄',
createTime: '2023-1-4'
}]
}
},
methods: {
view(){
view() {
alert(111)
}
}
}
}
</script>
<style lang="sass" scoped>
<style lang="scss" scoped>
::v-deep .el-table__fixed,.el-table__fixed-right ::before{
height: 0px !important;
}
</style>