• element -plus table的二次封装

    个人简介

    博主写了对element-plus的表格和表单的封装 大家支持一下
    [表格]https://gitee.com/childe-jia/table-vue3
    [表单] https://gitee.com/childe-jia/form-render

    Introduction

    WHAT

    i-table 基于元素 element-plus，但不限于元素 element-plus 组件。在完全继承 element-plus 元素的 table 属性的基础上，进行了扩展。一些非表格组件或自定义组件，因此，用户可以使用一段 json 来呈现完整的表格。

    WHY

    在我们的日常开发中，有很多有表格的页面，通常表格结构相似，逻辑重复。i-table 没有复杂的逻辑。它只转换 JSON 来呈现表格项，节省了编写业务逻辑的时间和精力，并减少了重复代码。

    Features

    • 用 json 呈现表格
    • 支持数据列配置及插槽
    • 支持操作列配置及插槽
    • 支持多选框配置
    • 支持分页显示
    • 支持响应式表格

    Links

    Quick Start

    git clone https://gitee.com/childe-jia/table-vue3.git
拉下项把 src\components\i-table 下组件放入自己项目 可跟业务场景自行修改

    • 1
    • 2
    <template>
  <!--region table 表格-->
  <app-table
    :list="list"
    :total="total"
    :otherHeight="otherHeight"
    :options="options"
    :pagination="pagination"
    :columns="columns"
    :operates="operates"
    @handleSizeChange="handleSizeChange"
    @handleIndexChange="handleIndexChange"
    @handleSelectionChange="handleSelectionChange"
    @sortChange="sortChange"
  >
  </app-table>
</template>

<script setup>
import { ref, reactive, h, resolveComponent } from "vue";
import appTable from "./components/i-table/table.vue";
let total = ref(1000);

let list = reactive([
  {
    id: 1,
    title: "标题",
    state: 1,
    author: "张三",
    phone: "12346788901",
    email: "1234556778@qq.com",
    createDate: "2023-04-23 16:11:38",
    zero: null,
    isOpend: true,
    headimgurl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  },
]);
let otherHeight = ref(288);
let columns = reactive([
  {
    prop: "id",
    label: "编号",
    align: "center",
    el: {
      // element ui的一些props...
      sortable: true, //开启排序
    },
  },

  {
    prop: "author",
    label: "作者",
    align: "center",
    width: 120,
  },
  {
    prop: "phone",
    label: "联系方式",
    align: "center",
    width: 160,
    show: false, //控制这一列是否展示
  },
  {
    prop: "zero",
    label: "邮箱",
    align: "center",
    width: 240,
  },

  {
    prop: "createDate",
    label: "发布时间",
    align: "center",
    width: 180,
    formatter: (row, column, cellValue) => {
      return row.createDate;
    },
  },
  {
    prop: "title",
    label: "标题",
    align: "center",
    formatter: (row, column, cellValue) => {
      return `${row.title}`;
    },
  },
  {
    prop: "state",
    label: "状态",
    align: "center",
    width: "160",
    render: (params) => {
      const fieldValue = params.row.state;
      const textMapping = {
        0: { type: "success", text: "上架" },
        1: { type: "info", text: "下架" },
        2: { type: "danger", text: "审核中" },
      };
      const type = textMapping.hasOwnProperty(fieldValue)
        ? textMapping[fieldValue].type
        : "default"; // 默认类型，可以根据需要修改

      const labelText = textMapping.hasOwnProperty(fieldValue)
        ? textMapping[fieldValue].text
        : "未知"; // 默认显示字段值，可以根据需要修改

      return h(resolveComponent("el-tag"), { type }, () => labelText);
    },
  },
  {
    prop: "switch",
    label: "开关",
    align: "center",
    width: "160",
    render: (params) => {
      return h(resolveComponent("el-switch"), {
        size: "default",
        modelValue: params.row.isOpend,
        onChange: (events) => {
          changeMsgStatus(events, params);
        },
      });
    },
  },

  {
    prop: "headimgurl",
    label: "头像",
    align: "center",
    render: (params) => {
      return h(
        resolveComponent("el-avatar"),
        {
          size: 44,
          src: params.row.headimgurl,
          // 图片加载失败展示默认图片
          onError: (e) => {
            return true;
          },
        },
        () => [
          h("img", {
            src: "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png",
          }),
        ]
      );
    },
  },

  {
    prop: "link",
    label: "查看",
    align: "center",
    width: "160",
    render: (params) => {
      return h(
        resolveComponent("el-link"),
        {
          type: "primary",
          underline: false,
          onClick: (e) => {
            handleDetail(params);
          },
        },
        () => "查看"
      );
    },
  },
]);
const operates = reactive({
  width: 200,
  fixed: "right",
  list: [
    {
      label: "编辑",
      type: "primary",
      plain: true,
      link: true,
      show: (index, row) => {
        return true;
      },
      icon: "Edit",
      disabled: false,
      method: (index, row) => {
        console.log("编辑");
        handleEdit(index, row);
      },
    },
    {
      label: "删除",
      type: "primary",
      icon: "Delete",
      plain: true,
      link: true,
      show: true,
      disabled: (index, row) => {
        return false;
      },
      method: (index, row) => {
        console.log("删除");
        handleDel(index, row);
      },
    },
    {
      label: "测试下拉1",
      type: "primary",
      icon: "el-icon-delete",
      show: true,
      disabled: (index, row) => {
        return false;
      },
      method: (index, row) => {
        console.log("测试下拉1");
        handleDel(index, row);
      },
    },
    {
      label: "测试下拉2",
      type: "primary",
      icon: "el-icon-delete",
      show: true,
      disabled: (index, row) => {
        return false;
      },
      method: (index, row) => {
        console.log("测试下拉2");
        handleDel(index, row);
      },
    },
  ],
});
const pagination = reactive({
  pageIndex: 1,
  pageSize: 20,
});
const options = reactive({
  stripe: true, // 是否为斑马纹 table
  loading: false, // 是否添加表格loading加载动画
  highlightCurrentRow: true, // 是否支持当前行高亮显示
  mutiSelect: true, // 是否支持列表项选中功能
  border: true, //是否显示边框
  numbers: true, //是否显示序号
  selectable() {
    //禁用选中
    return true;
  },
  headerCellStyle: { backgroundColor: "#FFF" }, //表头颜色
});
const handleSizeChange = (pagination) => {
  console.log("pagination", pagination);
};
const handleIndexChange = (pagination) => {
  console.log("pagination", pagination);
};
const handleSelectionChange = (val) => {
  console.log("val:", val);
};
const handleEdit = (index, row) => {
  console.log(" index:", index);
  console.log(" row:", row);
};
const handleDel = (index, row) => {
  console.log(" index:", index);
  console.log(" row:", row);
};
const sortChange = (data) => {
  console.log(data);
};
const changeMsgStatus = (ev, params) => {
  console.log(ev, params);
  list[0].isOpend = !list[0].isOpend;
};
const handleDetail = (params) => {
  console.log(params);
};
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277

    Props

    export default {
  // ...
  props: {
    noStatic: false, // 是否计算表格高度
    options: {
      type: Object,
      default: {
        stripe: false, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: false, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        border: false, //是否显示边框
        selectable: () => {
          //是否可以选中
          return false;
        },
      },
    }, // table 表格的控制参数
    total: {
      type: Number,
      default: 0,
    }, // 总数
    list: {
      type: Array,
      default: [], // prop:表头绑定的地段，label：表头名称，align：每列数据展示形式（left, center, right），width:列宽
    }, // 数据列表
    customHeight: {
      //与noStatic一起使用
      type: Number,
      default: 320,
    },
    columns: {
      type: Array,
      default: [], // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
    },
    operates: {
      type: Object,
      defaultt: () => {}, // width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
    },
    otherHeight: {
      type: Number,
      default: 180,
    }, // 计算表格的高度
    pagination: {
      type: Object,
      default: null, // 分页参数 === pageSize:每页展示的条数，pageIndex:当前页，pageArray: 每页展示条数的控制集合，默认 _page_array
    },
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    Methods

    support all el-table’s methods

    Inspiration

    thanks to Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页

  • 相关阅读:
    Nacos配置管理
    英语的学习思想（基础）
    hive中concat_ws的秘密
    Linux下JSON解析工具
    什么是IOS签名 180.188.22.X
    PE文件硬编码代码注入
    Elasticsearch：Geoshape query - 过滤含有地理位置的文档
    MyBatis快速入门
    【编程题】【Scratch四级】2022.03 求最大公约数
    PyTorch 二维多通道卷积运算方式
  • 原文地址：https://blog.csdn.net/qq_63358859/article/details/134089319