dz2.1/src/components/PublicPageTable/index.vue

<template>
  <div class="PublicPageTable">
    <el-table ref="table" :data="tableData" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange" @select="selectBox">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="450">
      </el-table-column>
      <el-table-column prop="date" label="类型" width="180">
      </el-table-column>
      <el-table-column prop="address" label="所属应用">
      </el-table-column>
      <el-table-column prop="address" label="编码">
      </el-table-column>
      <el-table-column prop="address" label="描述">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleDetails(scope.row)" type="text">详情</el-button>
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <el-button @click="handleRemove(scope.row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'PublicPageTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      ids: [],
      multipleSelection: []
    }
  },
  methods: {
    handleDetails (row) {
      this.$emit('handleDetails', row)
    },
    handleEdit (row) {
      this.$emit('handleEdit', row)
    },
    handleRemove (row) {
      this.$emit('handleRemove', row)
    },
    handleSelectionChange (rows) {

    },
    selectBoxAllChild (row) {
      const { isCheck, children } = row
      if (children?.length) {
        if (isCheck) {
          children.map(item => {
            item.isCheck = true
            this.$refs.table.toggleRowSelection(item, isCheck)
            this.selectBoxAllChild(item)
          })
        } else {
          children.map(item => {
            item.isCheck = false
            this.$refs.table.toggleRowSelection(item, isCheck)
            this.selectBoxAllChild(item)
          })
        }
      }
    },
    selectBox (selection, row) {
      row.isCheck = !row.isCheck
      const { children } = row
      if (children) {
        this.selectBoxAllChild(row)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.PublicPageTable {
  width: 100%;
  height: 100%;
}
</style>