yos_web/src/components/treeTable/index.vue

<template>
  <div>
    <el-table
        :data="tableData"
        stripe
        ref="table"
        row-key="itemclassid"
        default-expand-all
        size="small"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="itemclassname"
          show-overflow-tooltip
          :label="$t(`类别名称`)"
          width="300">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.selected" :checked="scope.row.selected" @change="onRowSelect(scope.row)" :disabled="scope.row.disabled" style="margin-right: 5px"></el-checkbox>
          <span style="color:#3874f6"><b>{{scope.row.itemclassname}}</b></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="brandname"
          :label="$t(`品牌`)">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "index",
  props:["tableData"],
  data(){
    return {

    }
  },
  methods:{
    onRowSelect(row){
      this.$emit('rowSelect',row)
    },
    clearAll(){
      this.tableData.forEach(row => {
        row.selected = false
        row.children.forEach(item => {
          item.selected = false
        })
      })
      this.$refs.table.clearSelection()
    },
  },
}
</script>

<style scoped>

</style>