element ui 表格点击某行折叠或展开有数展示下拉图标-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 表格点击某行折叠或展开有数展示下拉图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现的效果是这样的

element ui 表格点击某行折叠或展开有数展示下拉图标

这是表格demo

   <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" :row-class-name="getRowClassName" @row-click="rowClick" :row-key="rowKey" :expand-row-keys="nowExpand">
        <el-table-column type="expand">
          <template slot-scope="props" v-if="props.row.children">
            <el-form style="width: 100%;">
              <el-form-item>
                <el-table style="width: 100%;background: none" :data="props.row.children">
                  <el-table-column label="日期" prop="date" align="center">
                  </el-table-column>
                  <el-table-column label="姓名" prop="name" align="center">
                  </el-table-column>
                  <el-table-column label="地址" prop="address" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" plain>详情</el-button>
                      <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)" plain>录入</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>

      </el-table>

这是data中的数据

data(){
return{
    //当前展开行
      nowExpand: [],
//表格数据
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],}
}

这是方法

  methods: {
//rowkey获取方式 
    rowKey(row) {
      return row.id
    },
//点击该行就添加到显示数组中
    rowClick(row, event, column) {
      if (row.children != null) {
        let index = this.nowExpand.indexOf(row.id)
        if (index == -1) {
          this.nowExpand.push(row.id)
        } else {
          this.nowExpand.splice(index, 1)
        }
      }
    },
//设置没行的样式名称  是否显示下拉箭头
    getRowClassName({ row, rowIndex }) {//有children就显示箭头
      if (!row.children) {
        return 'row-expand-cover';
      } else {
        return 'row-expand-show'
      }
    },
 


  },

style中的内容文章来源地址https://www.toymoban.com/news/detail-513461.html

  <style lang="scss">
.row-expand-cover .el-table__expand-icon {
  visibility: hidden;
  display: none;
}
.row-expand-show .el-table__cell {
  &:nth-child(2) .el-table__expand-icon {
    visibility: hidden;
    display: none;
  }
}
</style>

到了这里，关于element ui 表格点击某行折叠或展开有数展示下拉图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！