vue element table jsx 封装

全局组件

<template>
  <el-table
    style="width: 100%"
    header-row-class-name="tableHeadClass"
    :data="tableData"
    size="medium"
    fit
    ref="multipleTable"
    border
    stripe
    @sort-change="handleSort"
    @filter-change="filterHandler"
    @row-click="handleRowClick"
  >
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="50"
      v-if="isOrderNum"
      show-overflow-tooltip
    >
    </el-table-column>
    <el-table-column
      v-for="(th, key) in tableHeader"
      :key="key"
      :prop="th.prop"
      :label="th.label"
      :fixed="th.fixed"
      :sortable="th.sortable ? 'custom' : false"
      :filters="th.filters"
      :column-key="th.columnKey"
      :filtered-value="th.filteredValue"
      :filter-multiple="th.filterMultiple"
      :min-width="th.minWidth"
      :width="th.width"
      :header-align="th.headerAlignalign ? th.headerAlignalign : 'center'"
      :align="th.align ? th.align : 'center'"
    >
      <template #header>
        <ex-slot v-if="th.thrender" :render="th.thrender" />
        <span v-else>{{ th.label }}</span>
      </template>
      <template slot-scope="scope">
        <ex-slot
          v-if="th.render"
          :render="th.render"
          :row="scope.row"
          :index="scope.$index"
          :column="th"
        />
        <span v-else>{{ scope.row[th.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null,
    },
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index,
    };
    if (data.props.column) params.column = data.props.column;
    return data.props.render(h, params);
  },
};
export default {
  name: "comp-table",
  components: { exSlot },
  props: {
    isOrderNum: {
      type: Boolean,
      default: true,
    },
    // 表格数据
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 表头数据
    tableHeader: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    // 排序事件
    handleSort(sort) {
      this.$emit("sort-events", sort);
    },
    // 筛选事件
    filterHandler(filters) {
      this.$emit("filter-events", filters);
    },
    // 某一行被点击
    handleRowClick(row) {
      this.$emit("click-events", row);
    },
  },
};
</script>

使用

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogShow"
    :width="width"
    :before-close="closeDialog"
  >
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="120px"
      class="addContract"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同单位" prop="name" class="long-item">
            <el-input
              v-model.trim="form.name"
              maxlength="100"
              placeholder="请输入合同单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同金额" prop="price" class="long-item">
            <el-input
              v-model.trim="form.price"
              maxlength="100"
              placeholder="请输入合同金额"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="price" class="long-item">
            <el-input
              v-model.trim="form.price"
              maxlength="100"
              placeholder="请输入客户名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单所属人" prop="price" class="long-item">
            <el-input
              v-model.trim="form.price"
              maxlength="100"
              placeholder="请输入订单所属人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单日期" prop="price" class="long-item">
            <el-date-picker
              v-model.trim="form.price"
              placeholder="请输入订单日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="订单所属部门" prop="price" class="long-item">
            <el-input v-model="info.department"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单区域" prop="price" class="long-item">
            <el-input v-model="info.department"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="软件产品" prop="price" class="long-item">
            <el-row class="page-table" style="margin-top: 10px">
              <compTable :tableHeader="tableHeader1" :tableData="tableData1" />
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="top-title">商品信息</div>
    <el-row class="page-table" style="margin-top: 10px">
      <compTable :tableHeader="tableHeader2" :tableData="tableData2" />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "新建产品模块",
    },
    width: {
      type: String,
      default: "800px",
    },
    height: {
      type: String,
      default: "",
    },
    dialogShow: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    select: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      costType: [
        { label: "博微1", value: 0 },
        { label: "博微2", value: 1 },
      ],
      //单位
      unitType: [
        { label: "件", value: 0 },
        { label: "套", value: 1 },
      ],
      tableHeader1: [
        {
          prop: "cost",
          label: "软件产品",
          minWidth: "150px",
          render: (h, params) => {
            return [
              <el-select v-model={params.row.cost}>
                {this.costType.map((item) => {
                  return (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    ></el-option>
                  );
                })}
              </el-select>,
            ];
          },
        },
        {
          prop: "unit",
          label: "单位",
          width: "120px",
          render: (h, params) => {
            return [
              <el-select v-model={params.row.unit}>
                {this.unitType.map((item) => {
                  return (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    ></el-option>
                  );
                })}
              </el-select>,
            ];
          },
        },
        {
          prop: "count",
          label: "数量",
          width: "120px",
          render: (h, params) => {
            return [
              <el-input-number
                controls-position="right"
                step={1}
                step-strictly
                v-model={params.row.count}
              />,
            ];
          },
        },

        {
          thrender: (h, params) => {
            return h("el-button", {
              props: {
                type: "text",
                icon: "el-icon-plus",
              },
              on: {
                click: () => {
                  this.addRow(this.tableData1);
                },
              },
            });
          },

          minWidth: "100px",
          render: (h, params) => {
            return h(
              "el-button",
              {
                props: {
                  type: "text",
                },

                on: {
                  click: () => {
                    this.deleteRow(this.tableData1, params.index);
                  },
                },
              },
              [h("i", { class: "el-icon-close delete" }, "")]
            );
          },
        },
      ],
      tableData1: [
        { cost: 0, unit: 0, count: 100, price: 1000 },
        { cost: 0, unit: 0, count: 100, price: 1000 },
      ],
      tableHeader2: [
        {
          prop: "cost",
          label: "商品名称",
          minWidth: "150px",
          render: (h, params) => {
            return [
              <el-select v-model={params.row.cost}>
                {this.costType.map((item) => {
                  return (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    ></el-option>
                  );
                })}
              </el-select>,
            ];
          },
        },
        {
          prop: "unit",
          label: "类型",
          width: "120px",
          render: (h, params) => {
            return [
              <el-select v-model={params.row.unit}>
                {this.unitType.map((item) => {
                  return (
                    <el-option
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    ></el-option>
                  );
                })}
              </el-select>,
            ];
          },
        },
        {
          prop: "count",
          label: "数量",
          width: "120px",
          render: (h, params) => {
            return [
              <el-input-number
                controls-position="right"
                step={1}
                step-strictly
                v-model={params.row.count}
              />,
            ];
          },
        },

        {
          label: "操作",
          minWidth: "100px",
          render: (h, params) => {
            return h(
              "el-button",
              {
                props: {
                  type: "text",
                },

                on: {
                  click: () => {
                    this.deleteRow(this.tableData2, params.index);
                  },
                },
              },
              [h("i", { class: "el-icon-close delete" }, "")]
            );
          },
        },
      ],
      tableData2: [
        { cost: 0, unit: 0, count: 100, price: 1000 },
        { cost: 0, unit: 0, count: 100, price: 1000 },
      ],
      info: {},
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: "名称必填",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dialogShow(val) {
      if (val) {
        this.info = this.data;
        this.form = this.select;
        console.log(this.info);
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    submitDialog() {
      //提交
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {
            softId: this.form.softId,
            name: this.form.name,
            remark: this.form.remark,
          };
          const loading = this.$loading({
            lock: true,
            background: "rgba(255, 255, 255, 0)",
          });
          if (this.data.id) {
            //编辑
            params.id = this.data.id;
            this.$http
              .postSoftModule(params, "/update")
              .then((res) => {
                this.$emit("submitDialog", "edit");
                loading.close();
              })
              .catch(() => {
                loading.close();
              });
          } else {
            //新增
            this.$http
              .postSoftModule(params, "/add")
              .then((res) => {
                this.$emit("submitDialog", "add");
                loading.close();
              })
              .catch(() => {
                loading.close();
              });
          }
        }
      });
    },
    addRow(data) {
      console.log(545);
      data.push({});
    },
    deleteRow(data, index) {
      data.splice(index, 1);
    },
    closeDialog() {
      //关闭
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang="less" >
.page-create .form .el-form.addContract {
  width: 100%;
  min-width: auto;
  max-width: auto;
}
</style>