el-table嵌入输入框
在Vue.js中使用Element UI库时,可以通过el-table-column
的template
属性或者scoped slot
来嵌入输入框。以下是一个简单的例子,展示了如何在el-table
中嵌入el-input
。
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
}, {
date: '2016-05-04',
name: '李小虎',
}]
}
}
}
</script>
在这个例子中,我们创建了一个包含日期和姓名的表格。在操作列中,我们嵌入了一个el-input
输入框,并且通过v-model
实现了数据双向绑定。这样,每行的姓名都会显示在对应的输入框内,并且任何修改都会实时反映在tableData
中对应的数据项上。
评论已关闭