cv-table-tree 树形列表

简要

• 表格组件
• 树形递归

示例

::: demo

<template>
  <div>
    <cv-form-inline>
      <cv-form-item>
        <cv-input-text v-model="soData.keyword" placeholder="标题／关键字／描述" />
      </cv-form-item>
      <cv-form-item label="状态" labelWidth="40">
        <cv-select-base v-model="soData.article_state1" :dataLists="settState" />
      </cv-form-item>
      <cv-form-item label="栏目" labelWidth="40">
        <cv-select-base v-model="soData.article_state2" :dataLists="settState" />
      </cv-form-item>
      <cv-form-item>
        <cv-select-base v-model="soData.article_state3" :dataLists="settState" />
      </cv-form-item>
      <cv-form-item>
        <cv-date-range v-model="soData.update" />
      </cv-form-item>
      <cv-form-item>
        <cv-btn-base type="primary" icon="search" @click="$refs.tlEm1.searchSubmit(soData)">搜索</cv-btn-base>
        <cv-btn-base icon="refresh-left" @click="(soData = {}), $refs.tlEm1.searchSubmit()">重置</cv-btn-base>
      </cv-form-item>
    </cv-form-inline>
    <div style="margin-bottom: 20px">
      <cv-btn-base icon="ElIconRefresh" @click="$refs.tlEm1.refresh()">刷新</cv-btn-base>
      <cv-btn-base icon="ElIconPlus" type="primary" @click="jumpsAuth">添加</cv-btn-base>
    </div>

    <!-- 列表 -->
    <cvTableTree ref="tlEm1" v-model="tableData" :tableConfig="tableConfig" :tableRefresh="tableRefresh">
      <cvTbColumnIndex label="序号" />
      <cvTbColumnCheck label="选择" />
      <cvTbColumnText label="ID" prop="cat_id" />
      <cvTbColumnText label="顶级分类" prop="cat_name" />
      <cvTbColumnImg label="分类图标" prop="cat_icon_cdn" />
      <cvTbColumnText label="内容" prop="dept_name" />
      <cvTbColumnBase label="状态" v-slot="{ row }">
        <cv-switch-base v-model="row.state" active-value="1" inactive-value="0" />
      </cvTbColumnBase>
      <cvTbColumnText label="推荐位置" prop="recommend_ids_tag" />
      <cvTbColumnText label="创建时间" prop="indate" minWidth="180" />
      <cvTbColumnOpt label="操作" v-slot="{ row }" minWidth="250">
        <cv-btn-text @click="jumpsAuth(`/xxxx/${row.id}/edit`)">编辑</cv-btn-text>
        <cv-btn-text @click="crudDelItem(row.cat_id, 'v3mall/sett_category/adminDelete')">删除</cv-btn-text>
      </cvTbColumnOpt>
    </cvTableTree>
  </div>
</template>
<script>
var testData = [
  {
    cat_id: 1,
    cat_name: 'test1',
    cat_icon_cdn: 'https://f.10yun.com/default/default.png',
    dept_name: 'test111',
    indate: '2021-03-24',
    tree: [
      {
        cat_id: 2,
        cat_name: 'test11-1',
        cat_icon_cdn: 'https://f.10yun.com/default/default.png',

        dept_name: 'test11-111',
        indate: '2021-03-24',
        tree: [
          {
            cat_id: 21,
            cat_name: 'test11-2-1',
            cat_icon_cdn: 'https://f.10yun.com/default/default.png',
            dept_name: 'test11-222-1',
            indate: '2021-03-24'
          },
          {
            cat_id: 22,
            cat_name: 'test11-2-2',
            cat_icon_cdn: 'https://f.10yun.com/default/default.png',
            dept_name: 'test11-222-2',
            indate: '2021-03-24'
          }
        ]
      },
      {
        cat_id: 3,
        cat_name: 'test11-2',
        cat_icon_cdn: 'https://f.10yun.com/default/default.png',
        dept_name: 'test11-222',
        indate: '2021-03-24'
      }
    ]
  },
  {
    cat_id: 4,
    cat_name: 'test2',
    cat_icon_cdn: 'https://f.10yun.com/default/default.png',
    dept_name: 'test222',
    indate: '2021-03-24'
  }
];
function mockData(param) {
  console.log('请求参数', param);
  let mockData = {
    msg: '请求mock数据成功',
    status: 200,
    pagesize: 10,
    page: 1,
    pagemax: 5,
    total: 50,
    data: testData,
    ...param
  };
  return new Promise((resolve, reject) => {
    try {
      // resolve({
      //   data: d
      //   total: this.data1.length,
      // })
      resolve(mockData);
    } catch {
      reject();
    }
  });
}
export default {
  name: 'App',
  components: {},
  data() {
    return {
      soData: {},
      settState: [
        { value: '0', label: '全部' },
        { value: '100', label: '审核通过' },
        { value: '5', label: '未审核' },
        { value: '2', label: '禁用' },
        { value: '66', label: '未通过驳回' },
        { value: '99', label: '回收站' }
      ],
      tableData: [],
      tableRefresh: 0,
      tableConfig: {
        // apiFunc: this.$request.flagGet('TEST_API'),
        apiFunc: mockData,
        where: {
          is_tree: 1
        },
        tablePrimary: 'cat_id',
        childName: 'tree' // children的字段名
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleAdd() {},
    jumpsAuth(path) {}
  }
};
</script>

:::