前端 - Vue.js el-table 点击行任意位置展开/收起?

Question

el-table树形数据与懒加载如何点击当前行任何地方展开收起，不仅仅是点三角标，还有编辑完后不收起来，依旧展开，每次编辑完都收起来不知道改了哪个

Answer 1

这里应该是你更新了所有的数据，所以被收起了。

可以通过不刷新来看一下确认是否是这个问题。

自定义展开就是用 toggleRowExpansion

也可以用 expand-row-keys

将 expand 变成受控的即可

Answer 2

你可以使用 row-class-name 属性来给每一行添加自定义的 CSS 类，然后使用这个类来控制行的展开和收起。下面是一个简单的例子：

<template>  <el-table    :data="tableData"    style="width: 100%"    :row-class-name="tableRowClassName"  >    <el-table-column type="expand">      <template slot-scope="props">        <el-form ref="form" :model="props.row" label-width="80px">          <el-form-item label="Name">            <el-input v-model="props.row.name"></el-input>          </el-form-item>          <el-form-item label="Age">            <el-input v-model="props.row.age"></el-input>          </el-form-item>          <el-button type="primary" @click="editForm(props.row)">Edit</el-button>        </el-form>      </template>    </el-table-column>    <el-table-column      prop="date"      label="Date"      width="180"    ></el-table-column>    <el-table-column      prop="name"      label="Name"      width="180"    ></el-table-column>    <el-table-column      prop="address"      label="Address"    ></el-table-column>  </el-table></template><script>export default {  data() {    return {      tableData: [{        date: '2016-05-03',        name: 'Tom',        age: 18,        address: 'No. 189, Grove St, Los Angeles'      }, {        date: '2016-05-02',        name: 'Jerry',        age: 19,        address: 'No. 189, Grove St, Los Angeles'      }]    }  },  methods: {    tableRowClassName({row, rowIndex}) {      if (row.editing) {        return 'editing'; // 定义展开行的 CSS 类名，这里假设为 'editing'。你可以根据需要自定义。      } else {        return ''; // 当行没有处于编辑状态时，返回空字符串。你可以根据需要返回其他 CSS 类名。      }    },    editForm(row) { // 编辑表单的方法。你可以根据需要修改。这里假设点击编辑按钮后，行会进入编辑状态。你可以根据实际需求修改。      row.editing = true; // 将行设置为编辑状态。你可以根据实际需求修改。注意这里我们是在 `ref` 中对表单进行了本地状态的管理，你需要自行进行相关操作以完成表单的提交和取消编辑等操作。    }  }}</script>