如图 点击添加行 就会出现table表中 空白的一行 让使用者自行填写
页面:
<el-button type="primary" class="add-btn" @click="addDemo"
>添加行</el-button
>
<el-table
:data="tableData"
size="mini"
stripe
highlight-current-row
border
style="width: 97.3%"
class="el-tb-edit"
:header-cell-style="{
background: '#2a87ed',
color: '#fff',
fontSize: ' 1.2rem',
fontWeight: 'normal',
height: '2.88rem',
}"
ref="demoTable"
>
<!-- <el-table-column type="index" width="50">序号</el-table-column> -->
<el-table-column prop="riskSourceName" label="主要危险源" width="130">
<template slot-scope="scope">
<div>
<el-input
v-model="scope.row.riskSourceName"
placeholder="请选择"
suffix-icon="el-icon-s-custom"
readonly
></el-input>
<span>{{ scope.row.riskSourceName }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="riskPointName" label="风险点" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.riskPointName" readonly></el-input>
<span>{{ scope.row.riskPointName }}</span>
</template>
</el-table-column>
<el-table-column prop="riskLevel" label="风险等级" width="160">
<template slot-scope="scope">
<el-select v-model="scope.row.riskLevel" placeholder="请选择" >
<el-option
v-for="item in risk"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
<span>{{ scope.row.riskLevelName }}</span>
</template>
</el-table-column>
<el-table-column prop="hiddenDanger" label="存在隐患" width="230">
<template slot-scope="scope">
<el-input
size="mini"
v-model="scope.row.hiddenDanger"
placeholder="请输入"
></el-input>
<span>{{ scope.row.hiddenDanger }}</span>
</template>
</el-table-column>
<el-table-column prop="type" label="分类" width="180">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="请选择">
<el-option
v-for="item in claoption"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
<span>{{ scope.row.typeName }}</span>
</template>
</el-table-column>
<el-table-column prop="accident" label="可能导致事故" width="180">
<template slot-scope="scope">
<el-select v-model="scope.row.accident" placeholder="请选择">
<el-option
v-for="item in acciList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
<span>{{ scope.row.accidentName }}</span>
</template>
</el-table-column>
</el-table>
js:
data() {
return {
dataId:0,
tableData: [],
};
},
methods: {
// 添加行
addDemo() {
var d = {
index: this.dataId++,
riskSourceName: "",
riskLevel: "",
riskPointName: "",
type: "",
hiddenDanger: "",
dangerLevel: "",
accident: "",
};
this.tableData.push(d);
setTimeout(() => {
this.$refs.demoTable.setCurrentRow(d);
}, 10);
},
}