elementUI 表格展开行

最新推荐文章于 2024-08-08 21:52:27 发布

_早睡身体好

最新推荐文章于 2024-08-08 21:52:27 发布

阅读量2.7k

点赞数 4

分类专栏： Vue中遇到的问题文章标签： vue

本文链接：https://blog.csdn.net/nothing_2020/article/details/116262353

版权

Vue中遇到的问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue.js应用中实现表格的点击行展开功能，每次只展示一行详细信息。通过设置`expand-row-keys`、`row-key`属性以及监听`expand-change`和`row-click`事件，结合`toggleRowExpansion`方法实现。同时，文章提到了阻止事件传播的方法`@click.stop`，确保按钮点击不受行点击事件影响。

摘要由CSDN通过智能技术生成

这次要实现的是点击哪行展开哪行，其他行关闭（即每次只展示一行）

效果图 ↓

<el-table
  :data="tableData"
  :expand-row-keys="expands"
  :row-key="getRowKeys"
  @expand-change="expandSelect"
  @row-click="clickRow"
  ref="expandTable"
  style="width: 100%">
  <el-table-column type="expand">
    <template slot-scope="props">
      <!-- 这放啥都行 不重要 -->
      <el-form>
        <el-form-item label="商品名称">
          <span>{{ props.row.name }}</span>
        </el-form-item>
      </el-form>
      <!-- 这放啥都行 不重要 -->
    </template>
  </el-table-column>
  <el-table-column label="商品 ID" align="center" prop="id"></el-table-column>
  <el-table-column label="商品名称" align="center" prop="name"></el-table-column>
  <el-table-column label="描述" align="center" prop="desc"></el-table-column>
  <el-table-column label="操作" align="center">
   <template slot-scope="scope">
     <el-button @click.stop="clickBtn">查看</el-button>
   </template>
  </el-table-column>
</el-table>

export default {
  data () {
    return {
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        shop: '王小虎夫妻店',
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        shop: '王小虎夫妻店',
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        shop: '王小虎夫妻店',
      }],
      // 要展开的行，数值的元素是row的key值
      expands: [],
      // 获取行数据的key
      getRowKeys (row) {
        return row.id
      },
    }
  },
  methods: {
    // 每次只展示一行
    expandSelect (row, expandedRows) {
      // 当没有展开行时
      if (expandedRows.length > 0) {
        // 先清空展开行数组
        this.expands = []
        // 把当前行的id放到展开行数组中（data中getRowKeys获取的是什么这里就push什么） 
        this.expands.push(row.id)
        } else {
          // 清空存放目前展开行的数组
          this.expands = []
      }
    },
    // 单击某行任意位置展开/收起行
    clickRow (row) {
      this.$refs.expandTable.toggleRowExpansion(row)
      // 如果仅为点击展开 传第二个参数为true
      // this.$refs.expandTable.toggleRowExpansion(row, true)
    },

	clickBtn () {
	  console.log('阻止单击事件继续传播')
	}
  }
}