对elementui中table的二次封装

本文档介绍了如何对ElementUI的Table组件进行二次封装,实现了动态添加多种输入控件并支持联动,编辑功能,以及按钮状态和内容颜色的智能控制。同时,还涉及到了列的管理,如删除、宽度配置和交换,以及根据表格勾选状态控制按钮操作。
摘要由CSDN通过智能技术生成

##仅仅写了留着自己用,不加解释,要用的自己看代码,实现的应用场景
1.动态添加不同的输入框选择框时间选择器且支持联动实现多行新增附加校验;
2.实现点击编辑操作把span标签换成输入框选择框时间选择器实现编辑
3.能用判断条件实现按钮的启用禁用,内容颜色的改变,过滤器功能
4.可以配合表格配置实现列删除,列宽度配置,列的交换
5.勾选表格实现对按钮操作的控制

table组件

<template>
  <div id="table">
    <el-table
      :ref="tableInfo.ref"
      :data="formatData"
      border
      stripe
      style="width: 100%"
      @select="onTableSelect"
      @selection-change="handleSelectionChange"
      @header-dragend="colChange"
    >
      >
      <!-- 表头 、表体-->
      <template v-for="column in tableInfo.columns">
        <el-table-column
          v-if="column.type"
          :fixed="column.fixed"
          :key="column.desc+new Date()"
          :label="column.name"
          :sortable="column.sortable?'custom':false"
          :type="column.type"
          :width="column.width==undefined?'auto':column.width"
          align="center"
        />
        <el-table-column
          v-if="!column.type"
          :fixed="column.fixed"
          :key="column.desc+new Date()"
          :label="column.name"
          :prop="column.desc"
          :show-overflow-tooltip="column.tooltip?true:false"
          :sortable="column.sortable?'custom':false"
          :width="column.width==undefined?'auto':column.width"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="!column.ShowState&&!column.showAndColor&&!column.show1&&!column.innerType&&!column.editInColumn&&!column.editBtns"
              :class="`${[1].includes(scope.row['stateIndex'])?'stateColorOne':([2].includes(scope.row['stateIndex'])?'stateColorTwo':'')}`"
              @click="onTableClick(column,scope.row,column.desc)"
            >{
   {
    scope.row[column.desc] }}</div>

            <div
              v-if="column.editInColumn"
              :class="`${[1].includes(scope.row['stateIndex'])?'stateColorOne':([2].includes(scope.row['stateIndex'])?'stateColorTwo':'')}`"
            >
              <span v-text="scope.row[column.desc]" v-if="scope.row['changeEdit']"></span>
              <el-select
                v-if="column.editInColumn==='select'&&!scope.row['changeEdit']"
                v-model="scope.row[column.desc]"
                :placeholder="column.placeholder"
                filterable
                clearable
              >
                <el-option
                  v-for="(item,i) in column.Options"
                  :key="i"
                  :label="item.label"
                  :value="item"
                  :value-key="true"
                />
              </el-select>
              <el-input
                v-if="column.editInColumn==='input'&&!scope.row['changeEdit']"
                v-model="scope.row[column.desc]"
                :placeholder="column.placeholder"
                clearable
              />
              <el-date-picker
                v-if="column.editInColumn==='date'&&!scope.row['changeEdit']"
                v-model="scope.row[column.desc]"
                :placeholder="column.placeholder"
                value-format="yyyy-MM-dd"
                type="date"
              />
            </div>

            <div v-if="column.innerType">
              <el-select
                v-if="column.innerType==='select'"
                :class="{'select-border':column.verify&&scope.row.verify[column.desc]}"
                v-model="scope.row[column.desc]"
                filterable
                clearable
                :placeholder="column.placeholder"
                @change="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @keyup.18.native="get"
              >
                <el-option
                  v-for="(item,i) in column.Options"
                  :key="i"
                  :label="item.label"
                  :value="item"
                  :value-key="true"
                />
              </el-select>
              <el-input
                :class="{'input-border':column.verify&&scope.row.verify[column.desc]}"
                v-if="column.innerType==='input'"
                v-model="scope.row[column.desc]"
                clearable
                :placeholder="column.placeholder"
                @input="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @keyup.18.native="get"
              />
              <el-date-picker
                :class="{'date-border':column.verify&&scope.row.verify[column.desc]}"
                v-if="column.innerType==='date'"
                v-model="scope.row[column.desc]"
                value-format="yyyy-MM-dd"
                type="date"
                :placeholder="column.placeholder"
                @blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
                @keyup.18.native="get"
              />
            </div>

            <div
              v-if="column.show1"
              :style="{'color':column.colorShow?((scope.row[column.desc] == column.statusIndex[0]||scope.row[column.desc] == null)? column.colorShow[0]:(scope.row[column.desc] == column.statusIndex[1]? column.colorShow[1] :( scope.row[column.desc] === column.statusIndex[2]?column.colorShow[2]:( scope.row[column.desc] === column.statusIndex[3]?column.colorShow[3]:( scope.row[column.desc] === column.statusIndex[4]?column.colorShow[4]:column.colorShow[5]))))):false}"
            >{
   {
    (scope.row[column.desc] == column.statusIndex[0]||scope.row[column.desc] == null)? column.status[0]:(scope.row[column.desc] == column.statusIndex[1]? column.status[1] :( scope.row[column.desc] === column.statusIndex[2]?column.status[2]:( scope.row[column.desc] === column.statusIndex[3]?column.status[3]:( scope.row[column.desc] === column.statusIndex[4]?column.status[4]:column.status[5])))) }}</div>
            <div
              v-if="column.showAndColor"
              :style="{color:(scope.row[column.desc] == 0||scope.row[column.desc] == null)? column.style[0]:(scope.row[column.desc] == 1? column.style[1] :( scope.row[column.desc] === 2?column.style[2]:( scope.row[column.desc] === 3?column.style[3]:( scope.row[column.desc] === 4?column.style[4]:column.style[5]))))}"
            >{
   {
    (scope.row[column.desc] == 0||scope.row[column.desc] == null)? column.status[0]:(scope.row[column.desc] == 1? column.status[1] :( scope.row[column.desc] === 2?column.status[2]:( scope.row[column.desc] === 3?column.status[3]:( scope.row[column.desc] === 4?column.status[4]:column.status[5])))) }}</div>

            <div v
ElementUItable 组件提供了非常丰富的功能和接口,但是在实际项目,我们经常需要对其进行二次封装,以满足自己的业务需求。下面是一个简单的 ElementUI table二次封装示例: ```vue <template> <el-table :data="tableData" :height="height" :max-height="maxHeight" :stripe="stripe" :border="border" :fit="fit" :show-header="showHeader" :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="rowStyle" :cell-class-name="cellClassName" :cell-style="cellStyle" :header-row-class-name="headerRowClassName" :header-row-style="headerRowStyle" :header-cell-class-name="headerCellClassName" :header-cell-style="headerCellStyle" :row-key="rowKey" @select="handleSelect" @select-all="handleSelectAll" @selection-change="handleSelectionChange" @cell-mouse-enter="handleCellMouseEnter" @cell-mouse-leave="handleCellMouseLeave" @cell-click="handleCellClick" @cell-dblclick="handleCellDblClick" @row-click="handleRowClick" @row-contextmenu="handleRowContextMenu" @row-dblclick="handleRowDblClick" @header-click="handleHeaderClick" @header-contextmenu="handleHeaderContextMenu" @sort-change="handleSortChange" @filter-change="handleFilterChange" > <slot></slot> </el-table> </template> <script> export default { name: "MyTable", props: { tableData: { type: Array, default: () => [] }, height: { type: [Number, String], default: "" }, maxHeight: { type: [Number, String], default: "" }, stripe: { type: Boolean, default: true }, border: { type: Boolean, default: true }, fit: { type: Boolean, default: true }, showHeader: { type: Boolean, default: true }, highlightCurrentRow: { type: Boolean, default: true }, rowClassName: { type: Function, default: () => undefined }, rowStyle: { type: Function, default: () => undefined }, cellClassName: { type: Function, default: () => undefined }, cellStyle: { type: Function, default: () => undefined }, headerRowClassName: { type: Function, default: () => undefined }, headerRowStyle: { type: Function, default: () => undefined }, headerCellClassName: { type: Function, default: () => undefined }, headerCellStyle: { type: Function, default: () => undefined }, rowKey: { type: [String, Function], default: "" } }, methods: { handleSelect(selection, row) { this.$emit("select", selection, row); }, handleSelectAll(selection) { this.$emit("select-all", selection); }, handleSelectionChange(selection) { this.$emit("selection-change", selection); }, handleCellMouseEnter(row, column, cell, event) { this.$emit("cell-mouse-enter", row, column, cell, event); }, handleCellMouseLeave(row, column, cell, event) { this.$emit("cell-mouse-leave", row, column, cell, event); }, handleCellClick(row, column, cell, event) { this.$emit("cell-click", row, column, cell, event); }, handleCellDblClick(row, column, cell, event) { this.$emit("cell-dblclick", row, column, cell, event); }, handleRowClick(row, event, column) { this.$emit("row-click", row, event, column); }, handleRowContextMenu(row, event) { this.$emit("row-contextmenu", row, event); }, handleRowDblClick(row, event) { this.$emit("row-dblclick", row, event); }, handleHeaderClick(column, event) { this.$emit("header-click", column, event); }, handleHeaderContextMenu(column, event) { this.$emit("header-contextmenu", column, event); }, handleSortChange({ column, prop, order }) { this.$emit("sort-change", { column, prop, order }); }, handleFilterChange(filters) { this.$emit("filter-change", filters); } } }; </script> ``` 这里我们定义了一个名为 `MyTable` 的组件,并将其 props 与 ElementUI table 组件的 props 一一对应。在组件的模板,我们使用了 `<slot></slot>`,表示组件的插槽,这样可以让用户在使用组件时自定义表格的列和内容。在组件的方法,我们将 ElementUI table 的事件通过 `$emit` 的方式向上传递,这样可以使得组件的使用更加灵活。 使用这个组件时,我们只需要在父组件引入 `MyTable` 组件,并将需要的 props 和插槽传入即可: ```vue <template> <my-table :table-data="tableData" :stripe="false" :highlight-current-row="false" @row-click="handleRowClick" > <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </my-table> </template> <script> import MyTable from "@/components/MyTable"; export default { name: "MyPage", components: { MyTable }, data() { return { tableData: [ { name: "张三", age: 18, address: "北京市" }, { name: "李四", age: 20, address: "上海市" }, { name: "王五", age: 22, address: "广州市" } ] }; }, methods: { handleRowClick(row) { console.log(row); } } }; </script> ``` 这样,我们就完成了一个简单的 ElementUI table二次封装,并且可以在父组件灵活使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值