项目场景:

项目中有时候需要使用element中el-table设置type="expand"展开行,但是需要隐藏小箭头,点击某个地方展开行,如下所示:

在这里插入图片描述


实现方法:

使用 type="expand" 可以开启展开行功能,使用 width="1" 可以隐藏展开行的小箭头。

		<el-table-column
            type="expand"
            width="1">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="10"
                v-model="scope.row.policyDoc">
              </el-input>
            </template>
          </el-table-column>

但是发现没有完全隐藏小箭头,如下所示:

在这里插入图片描述

解决方法是,修改为 width="5"便可。

在这里插入图片描述


仍有点小瑕疵。请网友提供更好的解决办法。


附加功能:列表单选、点击名称展开行:

<el-table
          :data="tableData"
          ref="tableObj"
          :stripe="true"
          @row-click = "showRow">
          <el-table-column
            type="expand"
            width="5">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="10"
                v-model="scope.row.policyDoc">
              </el-input>
            </template>
          </el-table-column>
          <!-- 单选 -->
          <el-table-column
            width="40">
            <template slot-scope="scope">
              <el-radio class="radio" :label="scope.row" v-model="radio" @change.native="getCurrentRow(scope.row)" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="toogleExpand(scope.row)" type="text">{{scope.row.name}}</el-button>
            </template>
          </el-table-column>
  </el-table>
radio: '',
policyData: {},
    //row-click    当某一行被点击时会触发该事件 row, event, column(可不用)
    showRow(row) {
      //赋值给radio
      console.log(row);
    },
    //获取选中行的数据
    getCurrentRow(val) {
      this.policyData = val;
    },
    //点击可展开项
    toogleExpand(row) {
      let table = this.$refs.tableObj;
      table.toggleRowExpansion(row);
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐