element Table 展开行功能 (设置点击行可展开功能)

素颜马尾好姑娘i 2023-06-27 03:52 511阅读 0赞

element Table 展开行功能 官方使用：

> 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `Scoped slot` 相同。

但这种设置，只是点击箭头可展开 ，点击整行是不能展开的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

但想要提升用户体验，最好的是点击行可展开，所以，本人研究了一下，做法也很简单。主要借助：

:row-key="getRowKeys"
    :expand-row-keys="expands"
    @row-click="clickRowHandle"

上面属性和事件缺一不可哦！

示例如下：

<el-table
            :data="questionData"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            stripe
            class="system-table"
            height="calc(100% - 170px)"
            @row-click="clickRowHandle"
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div style="padding-left: 60px;">
                  <div v-if="scope.row.titleAnswersList.length && scope.row.titleType !== '04'">
                    <h2 style="font-size: 14px;">题目选项</h2>
                    <div
                      v-for="item in scope.row.titleAnswersList"
                      :key="item.id" >
                      <p>{
       { item.answersCode }}:{
       { item.answersContent }}</p>
                    </div>
                  </div>
                  <div>
                    <h2 style="font-size: 14px;">备注</h2>
                    <div>{
       { scope.row.description || '暂无备注' }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
    
         /* 此处省略n行代码 */
    
    </el-table>

js核心代码如下：（无关代码都已删除）

data() {
        return {   
          // 获取row的key值
          getRowKeys(row) {
            return row.id;
          },
          // 要展开的行，数值的元素是row的key值
          expands: [],
      },
    
    methods: {
    
    
    clickRowHandle(row, column, event) {
          if (this.expands.includes(row.id)) {
            this.expands = this.expands.filter(val => val !== row.id);
          } else {
            this.expands.push(row.id);
          }
        },
    
    
    }

然后就可以实现点击行展开，如下所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202001031024122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200103103252728.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc=,size_16,color_FFFFFF,t_70