# @devops-web/cs-tree-table

> [更新日志](./CHANGELOG.md)

Latest version **2.1.4** (published 2024-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @devops-web/cs-tree-table
pnpm add @devops-web/cs-tree-table
yarn add @devops-web/cs-tree-table
bun add @devops-web/cs-tree-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.4 |
| Published | 2024-10-16 |
| First published | 2021-12-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | devopsweb, fangwenzheng |

## Links

- npm: https://www.npmjs.com/package/@devops-web/cs-tree-table
- npm.io page: https://npm.io/package/@devops-web/cs-tree-table

## Dependencies (1)

- [async-validator](https://npm.io/package/async-validator.md) ^1.12.2

## Recent versions

- 2.1.4 (latest) — 2024-10-16
- 2.0.1-beta.0 (beta) — 2024-04-08
- 2.1.3 — 2024-09-24
- 2.1.2 — 2024-09-13
- 2.1.1 — 2024-09-13
- 2.1.0 — 2024-09-13
- 2.0.8 — 2024-06-26
- 2.0.7 — 2024-06-26
- 2.0.6 — 2024-06-12
- 2.0.5 — 2024-06-04
- 2.0.4 — 2024-05-28
- 2.0.3 — 2024-05-28
- 2.0.2 — 2024-04-11
- 2.0.1 — 2024-04-08
- 2.0.0 — 2024-04-08
- … 50 more at https://npm.io/package/@devops-web/cs-tree-table/versions

## README

# 组件

[更新日志](./CHANGELOG.md)

## 更新流程
1. 切换源到npm官方源https://registry.npmjs.org/
2. npm login
4. 使用npm version patch修改package.json中的版本号
5. npm publish

## 组件开发流程

1. 将已经开发完成的组件放入全局组件工程`src\package`内
2. 将组件注册到`src\package\index.js`文件中

# 使用方法
```
npm i @devops-web/cs-tree-table
```
全局引入
```
import Vue from "vue";
import CsTreeTable from "@devops-web/cs-tree-table";
Vue.use(CsTreeTable);
```

# 树形表格
- selection, Boolean,默认 true,控制是否可选中
- 需要设置 lazy=true 和 load 函数
- hasChildren=true 标识行数据可以展开
- slot:footer 可以设置底部的删除等操作配置,不设置的时候底部的全选按钮也不展示

```
<template>
  <div>
    <cs-tree-table
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      :operations="operations"
      @getTableData="getTableData"
      :expand-row-keys="expandRowKeys"
      :checked-row-keys="checkedRowKeys"
      rowKey="id"
      :load="load"
      :lazy="true"
    >
      <template v-slot:name="scope">
        <el-tag>{{scope.row.name}}</el-tag>
        <span>{{scope.row.date}}</span>
      </template>
      <template v-slot:footer>
        <el-button size="mini" :disabled="checkedRowKeys.length === 0"
          >删除</el-button
        >
      </template>
    </cs-tree-table>
  </div>
</template>

<script>
let count = 100;
export default {
  name: "CsTable2",
  data() {
    return {
      /**
       * 表格操作列:参数类型可以是Function,Array,false
       */
      operations(row, column, $index) {
        let data = [
          {
            name: "detail",
            label: "详情",
            action: () => {
              console.log("详情");
            },
          },
          {
            name: "edit",
            label: "编辑",
            action: () => {
              console.log("编辑");
            },
          },
          {
            name: "remove",
            label: "删除",
            disabled: true,
            confirmMsg: "确认要删除xxx吗",
            action: () => {
              console.log("删除");
            },
          },
          {
            name: "xxx1",
            label: "启动",
            disabled: true,
            action: () => {
              console.log("启动");
            },
          },
          {
            name: "xxx2",
            label: "停止",
            action: () => {
              console.log("停止");
            },
          },
        ];
        if ($index === 0) {
          data = data.slice(0, 2);
        }
        return data;
      },
      /**
       * 表格列:formatter:目前可以date|datetime
       * 表格列:slot为自定义单元格内容,slotHader为自定义表头内容
       */
      columns: [
        {
          label: "Name",
          dataIndex: "name",
          slot:'name' // 这里的name和template中的v-slot:name保持一致即可
        },
        {
          type: "expand",
          label: "Date",
          dataIndex: "date",
        },
        {
          label: "Address",
          dataIndex: "address",
          showOverflowTooltip: true,
        },
      ],
      expandRowKeys: [],
      checkedRowKeys: [],
      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 弄",
          hasChildren: true,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      /**
       * 分页:total,pageNum,pageSize必传，简单环境下只用维护total字段
       */
      pagination: {
        total: 100,
        pageNum: 1,
        pageSize: 20,
        pageSizes: [10, 20, 1000], // 非必填
      },
    };
  },
  methods: {
    load(row, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: count++,
            date: "2016-05-01",
            name: "王小虎" + count++,
            address: "上海市普陀区金沙江路 1519 弄",
            hasChildren: true,
          },
          {
            id: count++,
            date: "2016-05-01",
            name: "王小虎" + count++,
            address: "上海市普陀区金沙江路 1519 弄",
          },
        ]);
      }, 1000);
    },
    getTableData() {
      // 这里需要清空,也可以设置默认的展开项和选中项
      this.expandRowKeys = [];
      this.checkedRowKeys = [];
      console.log(
        "分页参数",
        this.pagination.pageNum,
        this.pagination.pageSize
      );
      setTimeout(() => {
        this.tableData = [
          {
            id: 1,
            date: "2016-05-02",
            name: "王小虎3222",
            address: "上海市普陀区金沙江路 1518 弄",
          },
        ];
        this.pagination.total = 100;
      }, 1000);
    },
  },
};
</script>
```

---
_Source: https://npm.io/package/@devops-web/cs-tree-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._