element-plus里的el-table获取表格数据索引下标

最新推荐文章于 2024-10-23 17:07:39 发布

原创最新推荐文章于 2024-10-23 17:07:39 发布 · 6.8k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

这篇博客介绍了如何在Vue.js应用中利用Element UI库的`<el-table>`组件，通过`:row-class-name`属性为表格的每一行添加自定义类名。示例代码展示了如何定义`rowClassName`方法来设置行的类名，并在`update`方法中展示了如何获取选中行的索引和数据。这对于实现表格行的样式控制和交互功能具有重要意义。

首先要在表格里添加：row-class-name=“rowClassName”

 <el-table
    :data="tableData"
    ref="multipleTable"
    :row-class-name="rowClassName"
    border
  >
    <el-table-column prop="name4" label="所属部门"></el-table-column>
    <el-table-column  label="操作">
      <template #default="scope">
        <el-button type="text" size="medium" @click="update(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  export default {
		data(){
			return{
				tableData:[],
			}
		},
		methods:{
			 rowClassName({row, rowIndex}) {
		      //把每一行的索引放进row
		       row.index = rowIndex;
		    },
		    update(id,row){
		      this.$nextTick(() => {
		        setTimeout(()=>{
		          console.log(row.index);
		          this.addyg=true
		          this.tianjia=this.tableData[row.index]
		        },100)
		      })
		    },
		}
  }