![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0b6f457da8bce998a0ddf9c07630eb0c.png)
<el-table
v-if="form.addOrEditTransactionSalaryVo.isKpi===1"
stripe
border
highlight-current-row
:data="form.addOrEditTransactionSalaryVo.workTargetVoList"
:max-height="300"
>
<el-table-column type="index" label="" width="40" />
<el-table-column
v-for="(item, idx) in tableColumn"
:key="idx"
:prop="item.prop"
:label="item.label"
:width="item.width"
>
<template slot-scope="scope">
<div v-if="item.prop === 'targetName'" class=" table-operation">
<el-input
:ref="'el-input-' + idx"
v-model="scope.row[item.prop]"
:disabled="noEdit"
maxlength="100"
show-word-limit
/>
<!-- @keyup.enter.native="$event.target.blur" -->
<!-- @blur="validateBlur" -->
</div>
<!-- οnkeyup="value=value.replace(/[^\d{1,2}(.\d{1,2})?$]/g,'')" -->
<!-- @input="form.data=form.data.replace(/[^\d{1,2}(.\d{1,2})?$]/g,'')" -->
<div v-else-if="item.prop === 'ratio'" class="table-operation">
<el-input
:ref="'el-input-' + idx"
v-model="scope.row[item.prop]"
:disabled="noEdit"
type="number"
@focus="selectFocus(scope.$index)"
@blur="validateBlur(scope.$index, $event)"
/>
<!-- type="number" -->
<!-- @keyup.enter.native="$event.target.blur" -->
</div>
<span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" :width="50">
<template slot-scope="scope">
<div v-show="!noEdit" class="table-operation">
<a class="color-ff9" @click="operate(scope.$index)">删除</a>
</div>
</template>
</el-table-column>
</el-table>
可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试
<template slot-scope="scope">
<template>
<expand-dom :column="item" :row="scope.row" :render="item.value" :index="scope.$index" />
</template>
</template>
export default {
components: {
expandDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
}
}
},
<targetTable
:table-height="tableHeight-88"
:table-data="planList"
:table-columns="qualtableLabel"
:page="searchParams.pageNum"
:rows="searchParams.pageSize"
:total="searchParams.total"
@handleChange="handleChange"
/>
qualtableLabel: [ // 表头信息
{ label: '工资月份', param: 'month' },
{ label: '申请范围', param: 'userCode' },
{ label: '发起时间', param: 'userName' },
{ label: '发起人', param: 'departmentName', width: 240 },
{ label: '上一级处理人', param: 'gradeName' },
{ label: '流程状态', param: 'entryDate', width: 200 },
{ label: '待办人', param: 'leaveDate', width: 200 },
{
label: '操作', width: 240,
render: (h, scope) => {
return (<span>
{
<el-button type='primary' size='mini' plain icon='el-icon-emit' onClick={() => { this.goSet(scope.row, '') }}>查看</el-button>
}
</span>)
}
}
],