@devops-web/cs-tree-table

组件

更新日志

更新流程

1. 切换源到npm官方源https://registry.npmjs.org/
2. npm login
3. 使用npm version patch修改package.json中的版本号
4. 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>