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-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;
		}

效果图展示