流程中心表格列渲染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,129 +1,73 @@
<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="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
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">
查看
</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:'finishProcess',
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: 'finishProcess',
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, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
}
</style>
@@ -1,96 +1,73 @@
<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="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
align="left"
>
</el-table-column>
<el-table-column
prop="processPerson"
label="发起人"
width="390"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="260"
sortable
align="center"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
align="center">
<template slot-scope="scope">
<el-button
@click.native.prevent="handle(scope.$index, tableData)"
type="text"
size="small">
办理
</el-button>
</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>
</div>
<el-table-column prop="processName" label="流程名称" align="left">
</el-table-column>
<el-table-column prop="processPerson" label="发起人" align="center">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" sortable align="center">
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
办理
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'gencyProcess',
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: "gencyProcess",
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: {
handle() {
alert(111);
},
methods: {
handle(){
alert(111)
}
}
}
},
};
</script>
<style lang="sass" scoped>
<style lang="scss" scoped>
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
}
</style>
@@ -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>
@@ -1,145 +1,89 @@
<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="流程编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="processName"
label="流程名称"
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>
<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>
<el-button
@click.native.prevent="back(scope.$index, tableData)"
type="text"
size="small"
>
<span>强制撤回</span>
</el-button>
</template>
</el-table-column>
</el-table>
<el-button @click.native.prevent="back(scope.$index, tableData)" type="text" size="small"
style="color: rgb(236, 128, 141)">
强制撤回
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name:'sentProcess',
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: "sentProcess",
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(){
alert(111)
view() {
alert(111);
},
back(){
alert(222)
}
}
}
back() {
alert(222);
},
},
};
</script>
<style lang="scss" scoped>
.slot{
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
height: 0px !important;
}
</style>