vue+element如何实现可编辑表格?
vue+element如何实现可编辑表格?

vue+element如何实现可编辑表格?

在element的table组件中使用slot-scope(作用域插槽)来实现该需求,就相当于将<el-input>直接作为<el-table-column>的子组件使用,不用绑定对应的方法,直接用:hover方法就可以修改<el-input>的样式
slot-scope可能有些人有点陌生,这里贴上官网的链接请戳这里,里面很详细

<el-table :data="list" border style="width:100%">
   <el-table-column property="id" label="id"></el-table-column>
   <el-table-column property="name" label="名称">
       <template slot-scope="scope">
           <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
       </template>
   </el-table-column>
</el-table>

开发的时候碰到一个大的问题是,el-table-column里面的值怎么传到el-input中去?

实际上slot-scope的值可以解决这个问题,vue原生slot-scope 的值将被用作一个临时变量名,可以接收父组件传过来的值, 而在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,所以我们可以通过scope.row拿到对应的值.

https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/127775270

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注