vue-ele-gui

安装

npm i element-ui
npm i vue-gyc-ui

页面

<template>
  <g-table v-bind="tableAttrs" @load="load">
    <!-- <el-table-column>4646464</el-table-column> -->
    <template #name="{ row, index, value }">{{ value }}</template>
    <template #index="{ row, index, value }">{{ row.names }}666666</template>
    <template #name-header>{{ "测试表头" }}</template>
    <!-- <el-table-column prop="name" label="姓名"></el-table-column> -->
    <template #empty>777</template>
    <!-- <template #append>888</template> -->
    <!-- <el-table-column prop="name" label="姓名">
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
    </el-table-column> -->
    <!-- <template #more>
      <el-button>更多</el-button>
    </template>
    <template #query>
      <el-button>查询</el-button>
    </template> -->
    <!-- <template #add>
      <el-button>add</el-button>
    </template>
    <template #addleft>
      <el-button>left</el-button>
    </template>
    <template #addright>
      <el-button>right</el-button>
    </template> -->
    <!-- <template #page>
      <el-button>right</el-button>
    </template> -->
    <!-- <template #setting>
      <el-button type="success">right</el-button>
    </template> -->
  </g-table>
</template>

示例

<script lang="jsx">
import { reactive, onMounted } from "vue";
import gTable from "./g-table.vue";
import { objectFilter, openModel, sum } from "./g-tools";
import { formData, queryInfo, tableData } from "./test-data";
export default {
  name: 'test',
  components: { gTable },
  setup(prop, context) {
    let tableAttrs = reactive({
      table: {
        border: true,
        stripe: true,
        'row-key': 'id',
        'item-width': 200,
        onRowClick: (row, column, event) => {
          console.log(column);
        },
        onRowDblclick: (row, column, event) => {
          alert("double");
        },
        //data: tableData,
        columns: formData.items,
        count: 88,
      },
      page: {
        background: true, visible: true
      },
      query: {
        "item-width": "220px",
        "label-width": "100px",
        "label-align": "flex-start",
        //visible: false,
        items: queryInfo,
        more: {
          title: '搜索更多',
          width: 800,
          //trigger: 'hover',
          //"popper-style": 'background-color:red;', effect: 'dark'
        }
      },
      form: {
        //visible: false,
        attrs: formData,
        slots: { 'names-suffix': () => <i>888</i> },
        model: { attrs: { title: '增加一个表单' } },
      },
      setting: {
        title: '表格设置列',
        slots: {
          header: () => <span>表格列设置</span>
        }
      }
    });
    const load = (param, back) => {
      back(tableData())
    }
    onMounted(() => {
      // let b = { items: objectFilter(tableAttrs.query.items, (a, b) => b == 'sex') }
      // console.log(b)
      // console.log(sum([{ age: 2 }, { age: 12 }, { age: 6 }], a => a.age))
      // console.log(sum([1, 2, 3.1], a => a, 3, true))
      //console.log(sum([1, 2, 3], (a) => a, 1, true));
      //console.log(['ab', 'abc'].includes('abce'));
      context.emit('load');
      openModel({ title: '测试查询', url: './test-query.vue', width: '1000px' })
    })
    return { tableAttrs, load };
  },
};
</script>

<style lang="scss" scoped></style>