vue+ts+element 表格添加下拉框和input选项
<el-table:data="tableData"class="tb-edit":header-cell-style="{ background: '#b4d8df' }"style="width: 100%"height="600px"highlight-current-row@row-click="handleCurrentChange"><el-table-.
·
<el-table
:data="tableData"
class="tb-edit"
:header-cell-style="{ background: '#b4d8df' }"
style="width: 100%"
height="600px"
highlight-current-row
@row-click="handleCurrentChange"
>
<el-table-column label="名称" width="180">
<template scope="scope">
<el-select size="small" v-model="scope.row.date" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<span>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="类型" width="180">
<template scope="scope">
<el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="原格式">
<template scope="scope">
<el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="长度">
<template scope="scope">
<el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="精度">
<template scope="scope">
<el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{ scope.row.address }}</span>
</template>
</el-table-column>
</el-table>
tableData: Array<Object> = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
handleCurrentChange(row, event, column) {
console.log(row, event, column, event.currentTarget)
}
handleEdit(index, row) {
console.log(index, row)
}
.tb-edit .el-input {
display: none;
}
.tb-edit .el-select {
display: none;
}
.tb-edit .current-row .el-select {
display: block;
}
.tb-edit .current-row .el-select + span {
display: none;
}
.tb-edit .current-row .el-input {
display: block;
}
.tb-edit .current-row .el-input + span {
display: none;
}
效果图展示
更多推荐
已为社区贡献9条内容
所有评论(0)