table-page-vue2

安装

npm install yzs-table-page
npm install vue-draggable-resizable

注意：

1.依赖 [email protected] 以上版本，其中使用了 Vue.observable

兼容 [email protected] 版本的方法

设置全局方法 window.VueObservable

window.VueObservable = <自己实现的、或者从 `[email protected]` 以上版本拷贝来的 observable 方法>

2.组件依赖于ant-design-vue 1.x(For Vue2)，项目中未使用ant-design-vue不建议使用该组件

配置

引入 ant-design-vue 和 vue-draggable-resizable

// main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

// *** 这里引入
import VueDraggableResizable from "vue-draggable-resizable";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
Vue.use(Antd);
// ***

new Vue({
  render: (h) => h(App),
}).$mount("#app");

使用

<template>
  <div id="app">
    <TablePage
      :columns="columns"                        // 设置列属性
      :data="data"                              // 显示的数据数
      :total="total"                            // 数据总条数
      :loading="loading"                        // 控制 loading 动画
      :row-selection="{                         // 开启行选择
        columnWidth: 40,
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :row-key="rowKey"                         // 行唯一标识
      :show-pager="false"                       // 是否显示分页
      init-data                                 // 初始化时自动获取数据
      ref="tablePage"                           // 必须设置 ref 为 tablePage
      @fetch="fetch"                            // 获取数据方法
      @dblclick="dblclick"                      // 表格行双击时的回调，类型 (record) => void
      @mouseenter="mouseenter"                  // 表格行鼠标移入时的回调，类型 (record, index) => void
      @mouseleave="mouseleave"                  // 表格行鼠标移出时的回调，类型 (record, index) => void
      @table-render="onTableRender"             // 表格每次渲染时的回调
      :field-components="['TestField']"         // 表头允许使用的字段组件名
    >
      <template slot="filter">                  // filter slot，控制表格筛选表单
        <QueryForm ref="QueryForm"></QueryForm>
      </template>
      <template slot="actions">                 // actions slot，控制表格操作行
        <div style="display: flex">
          <a-button class="mr-10" size="small" ghost type="primary">
            查看日志
          </a-button>
        </div>
      </template>
    </TablePage>
  </div>
</template>

<script>
import { TablePage, EditTableCell } from "yzs-table-page";
import "yzs-table-page/dist/yzs-table-page.css";
import { getData } from "./data";
import QueryForm from "./components/QueryForm.vue"
export default {
  name: "App",
  components: { TablePage, QueryForm },
  data() {
    const columns = [
      {
        dataIndex: "time",
        key: "time",
        title: "时间",
        width: 200,
        align: "center",
        // field: {
        //   type: "TestField",
        // },
      },
      {
        dataIndex: "name",
        key: "name",
        title: "姓名",
        width: 200,
        align: "center",
      },
      {
        dataIndex: "age",
        key: "age",
        title: "年龄",
        width: 200,
        align: "center",
        sorter: true,
      },
      {
        dataIndex: "requireText",
        key: "requireText",
        title: "发单要求",
        width: 200,
        align: "center",
        customRender: (text) => {
          return (
            <EditTableCell
              type="input"
              text={text}
              onChange={this.onRequireTextChange}
            ></EditTableCell>
          );
        },
      },
    ];
    return {
      selectedRowKeys: [],
      loading: false,
      rowKey: "id",
      total: 0,
      data: [],
      columns,
    };
  },
  methods: {
    /**
     page: 分页数据
     param: 如存在表头查询为表头查询参数
     filters: 如存在表头筛选为表头筛选参数
     sorters: 如存在表头排序为表头排序参数
     */
    async fetch(page, param = {}, filters, sorters) {         
      const { current, pageSize } = page;
      this.loading = true;
      const condition = Object.assign(this.$refs.QueryForm.getFields(), param);
      const data = await getData(
        condition,
        page: { pageNo: current, pageSize },
       );
      this.loading = false;
      const { success } = data;
      if (!success) return;

      this.data = data.list;
      this.total = data.total;

      this.selectedRowKeys = [];
    },
    onSelectChange(record) {
      this.selectedRowKeys = record;
    },
    onTableRender() {
      // do something
    },
    onRequireTextChange(v) {
      console.log(v);
    },
  },
};
</script>

其中QueryForm组件为表格上方搜索区域，示例:

<template>
    <a-form-model
        layout="inline"
        ref="formModal"
        :colon="false"
        :model="model"
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 16 }"
        class="common-search-form"
   >
      <a-row>
        <a-col :span="4">
          <a-form-model-item label="姓名" prop="name">
            <a-input v-model="model.name" placeholder="请输入姓名"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="5">
          <a-form-model-item label="状态" prop="status">
            <a-select v-model="model.status" placeholder="请选择状态">
              <a-select-option
                v-for="item in statusOption"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
</template>
<script>
export default {
  name: "QueryForm",
  data() {
    return {
      statusOption: [{ value: 1, label: "待审核"}, {value: 2, label: "未审核"}],
      model: {name: '', status: 1},
    };
  },
  methods: {
    getFields() {       
      return this.model;
    },
    reset() {           // 目前定义重置方法名称时必须为reset，点击表格组件的重置按钮才会调用该方法
      this.model = this.$options.data().model;
    },
  },
};
</script>

自定义组件控件

一、创建自定义组件，要求的接口如下：

props: {
  value: any,
  placeholder?: string,
}
on: {
  change: Function,
}

// TestField.vue
<template>
  <a-select
    v-model="val"
    :placeholder="placeholder"
    showSearch
    :disabled="disabled"
    allowClear
    @change="(val) => $emit('change', val)"
  >
    <a-select-option
      v-for="item in options"
      :value="item.value"
      :key="item.label"
      >{{ item.label }}</a-select-option
    >
  </a-select>
</template>
<script>
export default {
  name: "TestSelect",
  props: {
    value: {
      default: undefined,
    },
    placeholder: {
      type: String,
      default: "请选择港口",
    },
    disabled:{
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      val: this.value,
      options: [
        { label: "A", value: 'a' },
        { label: "B", value: 'b' },
        { label: "C", value: 'c' },
        { label: "D", value: 'd' },
      ]
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.val = val;
      },
    },
  },
};
</script>

二、在 main.js 上注册自定义组件

// main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

import VueDraggableResizable from "vue-draggable-resizable";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
Vue.use(Antd);

// 测试 TableHeadField 接受各类自定义字段控件。注册 TestField
import TestField from "./TestField";
Vue.component("TestField", TestField);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

三、在 TablePage 中使用自定义组件

// App.vue
//...
<TablePage
  :columns="columns"
  :data="data"
  :total="total"
  :loading="loading"
  :row-selection="{
    columnWidth: 40,
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
  }"
  :row-key="rowKey"
  @fetch="fetch"
  init-data
  ref="tablePage"
  @table-render="onTableRender"
  // *** 这里引入自定义组件
  :field-components="['TestField']"
></TablePage>

const columns = [
  {
    dataIndex: "time",
    key: "time",
    title: "时间",
    width: 200,
    align: "center",
    // 这里设置列头需要的自定义组件字段
    field: {
      type: "TestField",
    },
  },
  {
    dataIndex: "name",
    key: "name",
    title: "姓名",
    width: 200,
    align: "center",
  },
  {
    dataIndex: "age",
    key: "age",
    title: "年龄",
    width: 200,
    align: "center",
  },
];
//...

安装

pnpm install

测试

pnpm run serve

打包

pnpm run build