talk2all-base v1.2.11

快速上手

talk2all-base 基于 vue3 + ts + Element-plus 再次封装的基础组件

vite4+ ndoe16+

安装 正式版 1.2.10+

npm i talk2all-base -S
&
pnpm add talk2all-base -S

使用

// main.ts
import talk2all from 'talk2all-base';
import 'talk2all-base/lib/style.css';
const app = createApp(App);
app.use(talk2all, {
  proxyKey: '/api',
  pageKey: 'page', // 分页字段
  sizeKey: 'size', // 分页字段
  tokenKey: 'token', // token 存储在localStorage
  ISOK: 200, // 响应成功返回
  ISERROR: 500, // 响应错误状态返回
  codeKey: 'code', // 响应状态返回字段
  msgKey: 'msg', // 响应提示文字返回字段
  /* 分页接口
  data => 表格 数据层级 数据结构 data.data
  total => 总页数 数据层级 数据结构 data.data
  */
  pageResponse: {
    data: 'data', // 返回
    total: 'total',
  },
  /* 详情接口 detailedInterface
  data => 详情 数据层级 数据结构 data.data
  */
  infoResponse: {
    data: 'data', // 返回数据结构 data.data
  },
});
app.mount('#app');

talk2AllBase 组件使用

<script setup lang="tsx">
import { ref, reactive } from 'vue';
import type {
  TableBaseType,
  BaseColumns,
} from 'talk2all-base/lib/tableBase/index';
import type { FormRules } from 'element-plus';

interface addFormVO {
  title: string;
}
const talk2AllBaseRef: any = ref<TableBaseType>();

const columns: BaseColumns[] = reactive<BaseColumns[]>([
  {
    label: '名称',
    prop: 'name',
    align: 'center',
    width: '200px',
  },
  {
    label: '描述',
    prop: 'prompt',
    align: 'left',
  },
  {
    label: '时间',
    prop: 'time',
    width: '180px',
  },
  {
    label: '标题',
    prop: 'title',
    width: '180px',
  },
  {
    label: '操作',
    prop: '',
    width: '100px',
    render: (row: any) => {
      return (
        <div>
          <el-button type="text" onclick={() => edit(row)}>
            编辑
          </el-button>
          <el-button type="text" onclick={() => info(row)}>
            查看
          </el-button>
        </div>
      );
    },
  },
]);

const formInline = ref({
  name: '',
});

const addForm = ref<addFormVO>({
  title: '',
});

const rules = ref<FormRules<addFormVO>>({
  title: { required: true, message: '标题不能为空', trigger: 'blur' },
});

const edit = (row: any) => {
  talk2AllBaseRef.value?.edit(row.id);
};
const info = (row: any) => {
  talk2AllBaseRef.value?.info(row.id);
};
</script>

<template>
  <div class="table-box">
    <talk2-all-base
      ref="talk2AllBaseRef"
      :hasselection="true"
      :has-batch-delete="true"
      :has-add="true"
      :form-inline="formInline"
      :columns="columns"
      :addForm="addForm"
      :rules="rules"
      api-for-page=""
      api-for-save=""
      api-for-info=""
      api-for-put=""
      api-for-delete=""
    >
      <template #searchForm="data">
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="data.formInline.name" placeholder="请输入客户名称">
          </el-input>
        </el-form-item>
      </template>
      <template #addForm="data">
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="data.addForm.title"
            placeholder="请输入标题"
            clearable
          >
          </el-input>
        </el-form-item>
      </template>
    </talk2-all-base>
  </div>
</template>

<style lang="scss" scoped>
.table-box {
  width: 100%;
  height: 600px;
}
</style>

tablebase 组件参数说明

tablebase 事件说明

tablebase 方法说明

tablebase 插槽说明

operationtype 表单状态

columns 参数说明

// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions：{
  "types": [
      "talk2all-base/global",
    ],
}

// 如果表单的清空提交不做处理  需要在使用的项目的vite.config文件中 注释此段的代码
import Components from 'unplugin-vue-components/vite';
 Components({
	resolvers: [ElementPlusResolver()],
}),

// 或者删除局部引入 elfrom 或者 elfromitem
import { ElForm, ElFormItem } from 'element-plus';

// 如果tsx 语法eslint报错 tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": false, // 隐式具有“any”类型
  }
}

联系我 506970220@qq.com