vue+typescript element expandTable展开表格封装

傷城~ 2023-03-02 10:47 19阅读 0赞

<template>
      <div>
        <el-table
          ref="expandTable"
          class="expand-table"
          :data="tableList"
          :show-header="true"
          :size="size"
          @expand-change="open"
        >
          
          <el-table-column type="expand">
            <template slot-scope="props">
              <p class="el-title">{
       { increment.title }}</p>
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row>
                  
                  <el-col :span="4">
                    <div class="grid-content bg-purple">
                      <div class="col-grid">
                        <el-checkbox
                          v-for="(i, v) in props.row.selectAll"
                          :key="v"
                          v-model="i.checked"
                          class="col-checkbox"
                          :checked="i.checked"
                          :label="i.value"
                          @change="handleCkecked(props.row, i, v)"
                        />
                      </div>
                    </div>
                  </el-col>
                  
                  <el-col :span="20">
                    <div class="bg-purple-light">
                      <div class="grid-boxcheck">
                        <el-checkbox
                          v-for="(i, v) in props.row.childrenList"
                          v-show="i.type == '0'"
                          :key="v"
                          v-model="i.checked"
                          :label="i.name"
                          :checked="i.checked"
                          class="prop-checkbox"
                          @change="changeChecked(props.row, i, v)"
                        />
                      </div>
                      <div class="grid-boxcheck">
                        <el-checkbox
                          v-for="(i, v) in props.row.childrenList"
                          v-show="i.type == '1'"
                          :key="v"
                          v-model="i.checked"
                          :checked="i.checked"
                          :label="i.name"
                          class="row-checkbox"
                          @change="changeChecked(props.row, i, v)"
                        />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
              
              <p class="el-bottom">
                <span class="sp-settlement">{
       { increment.settlement }}</span>
                <span class="sp-receipt">{
       { increment.receipt }}</span>
                <span class="sp-charge">{
       { increment.charge }}</span>
                <span class="sp-money">￥{
       { monery(props.row) }}</span>
              </p>
            </template>
          </el-table-column>``
          
          <el-table-column
            v-for="(item, index) in tableCols"
            :key="index"
            :render-header="item.column?renderHeader:null"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
          >
            <template slot-scope="scope">
              
              <div v-if="item.type === 'Button'">
                <el-button
                  v-for="(btn, i) in scope.row.btnList"
                  :key="i"
                  :type="btn.type"
                  @click="changeEvent(scope.row, btn, i)"
                >
                  {
       { btn.label }}
                </el-button>
              </div>
              
              <div v-if="item.type === 'Input'">
                <el-form :model="scope.row" :rules="item.rules">
                  <el-form-item :prop="item.prop">
                    <el-input
                      v-model="scope.row[item.prop]"
                      :placeholder="item.mold?'':'请输入' + `${item.label}`"
                      :class="item.mold?'number-input':''"
                      :type="item.mold"
                      @change="handleChange(scope.row)"
                    />
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="add-commodity">
          <i class="el-icon-circle-plus-outline" />
          <el-button type="text" class="btn-text" @click="addCommodity">
            {
       { increment.addCommodity }}
          </el-button>
        </div>
      </div>
    </template>
    <script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator'
    import _ from 'lodash'
    @Component
    export default class FormTable extends Vue {
      // 表格型号：big,small,mini
      @Prop({
        type: String,
        default: 'mini'
      })
      readonly size!: string
      @Prop({
        type: Object,
        default: () => null
      })
      readonly increment!: object
      // 表格数据
      @Prop({
        type: Array,
        default: () => []
      })
      readonly tableData!: any[]
      // 表格列配置
      @Prop({
        type: Array,
        default: () => []
      })
      readonly tableCols!: any[]
      // 表格数据
      public tableList: any = []
      // 添加商品对象
      public form: object = {}
      // 输入框change事件
      handleChange(row: any) {
        const formData = {
          tradeName: row.tradeName,
          skuModel: row.skuModel,
          mount: row.mount,
          codeModel: row.codeModel
        }
        this.$emit('handleChange', formData)
      }
      removeAaary(_arr: any, _obj: any) {
        const length = _arr.length
        for (let i = 0; i < length; i++) {
          if (_arr[i] === _obj) {
            if (i === 0) {
              _arr.shift() // 删除并返回数组的第一个元素
              return _arr
            } else if (i === length - 1) {
              _arr.pop() // 删除并返回数组的最后一个元素
              return _arr
            } else {
              _arr.splice(i, 1) // 删除下标为i的元素
              return _arr
            }
          }
        }
      }
      // 操作项 收起服务，删除
      changeEvent(row: any, item:any, btn: any, index: number) {
        const el:any = this.$refs.expandTable
        if (index === 0) {
        // eslint-disable-next-line eqeqeq
          if (row.open == true) {
            btn.label = '收起服务项'
          } else {
            btn.label = '展开服务项'
          }
          el.toggleRowExpansion(row)
        } else {
          this.$emit('removeAaary', row)
          this.tableList.splice(row, 1)
        }
      }
      // 表格收起，文字按钮是展开服务项
      loopTraversal() {
        this.tableList.forEach((v: any) => {
        // eslint-disable-next-line eqeqeq
          if (v.open == false) {
            v.btnList[0].label = '展开服务项'
          }
        })
      }
      // 添加商品
      addCommodity() {
        this.tableList.forEach((i: any) => {
          i.open = false
        })
        this.tableData.forEach((v: any) => {
          this.form = _.cloneDeep(v)
        })
        this.tableList.push(this.form)
        this.loopTraversal()
      }
      // 单选事件
      changeChecked(item: any, i: any, v: any) {
        const arr: any = item.childrenList.filter(
          (ever: any) => ever.type === i.type
        )
        if (i.type === '0') {
          item.selectAll[1].checked = arr.every((v: any) => v.checked)
        } else if (i.type === '1') {
          item.selectAll[2].checked = arr.every((v: any) => v.checked)
        }
        item.selectAll[0].checked = item.childrenList.every((v: any) => v.checked)
        const valarr: any = item.childrenList.filter((v: any) => v.checked)
        this.$emit('changeChecked', valarr)
      }
      // 全选事件
      handleCkecked(row: any, item: any, index: number) {
        switch (index) {
          case 0:
            row.childrenList.forEach((v: any) => {
              v.checked = item.checked
            })
            row.selectAll.forEach((v: any, index: number) => {
            // eslint-disable-next-line no-unused-expressions
              index !== 0 ? (v.checked = item.checked) : null
            })
            break
          case 1:
            row.childrenList.forEach((v: any) => {
            // eslint-disable-next-line no-unused-expressions
              v.type === '0' ? (v.checked = item.checked) : null
            })
            break
          case 2:
            row.childrenList.forEach((v: any) => {
            // eslint-disable-next-line no-unused-expressions
              v.type === '1' ? (v.checked = item.checked) : null
            })
            break
          default:
            break
        }
        const copyArr: any = [row.selectAll[1], row.selectAll[2]]
        row.selectAll[0].checked = copyArr.every(
          (v: any, index: number) => v.checked
        )
        const arr: any = row.childrenList.filter((v: any) => v.checked)
        this.$emit('handleCkecked', arr)
      }
      // 计算服务费
      monery(row: any) {
        const arr: any = row.childrenList.filter((v: any) => v.checked)
        let num = 0
        arr.forEach((v: any) => {
          num += v.price
        })
        return num
      }
      // 表格展开行
      open(row: any) {
        row.open = !row.open
        // eslint-disable-next-line eqeqeq
        if (row.open == true) {
          row.btnList[0].label = '收起服务项'
        } else {
          row.btnList[0].label = '展开服务项'
        }
      }
      // 表格表头增加红色*
      renderHeader(cerateElement:Function, { column }:any) {
        return cerateElement('div', [
          cerateElement('span', column.label),
          cerateElement('span', {
            domProps: {
              innerHTML: '*'
            },
            style: {
              color: 'red',
              fontSize: '16px',
              marginRight: '2px',
              marginTop: '1px',
              float: 'left'
            }
          })
        ])
      }
      created() {
        this.tableList = _.cloneDeep(this.tableData)
      }
    }
    </script>
    <style lang="scss">
    @import '@/components/formTable/index.scss';
    </style>

.col-checkbox {
      margin-left: 10px;
      margin-top: 10px;
    }
    .grid-boxcheck {
      display: flex;
      flex-wrap:wrap;
      height: 100%;
      .row-checkbox {
        padding-bottom: 10px;
        width: 150px;
        margin-left: 10px;
      }
      .prop-checkbox {
        padding-top: 10px;
        margin-left: 10px;
        width: 150px;
      }
    }
    .col-grid:nth-child(3) {
      padding-bottom: 10px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      position: absolute;
      height: 100%;
      width: 16%;
      background: #f3f3f7;
    }
    .bg-purple-light {
      background: #f8f9fb;
    }
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    .number-input {
      width: 50px !important;
    }
    //去掉input为number 箭头
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input[type='number'] {
      -moz-appearance: textfield;
    }
    .el-table__expanded-cell[class*=cell] {
        padding:10px 10px 20px 10px;
    }
    .el-col-20{
      margin-left: 16%;
    }
    .el-title{
      font-weight:600;
      margin-bottom: 10px;
    }
    .el-bottom{
      float:right;
      margin-top: 10px;
      margin-right: 20px;
      .sp-money{
        color:red;
        font-weight: 700;
        font-size: 18px;
        margin-left: 8px;
      }
      .sp-charge{
        margin-left: 8px;
      }
      .sp-receipt{
        margin-left: 5px;
      }
    }
    .add-commodity{
      text-align: center;
      height: 50px;
      margin-top:10px;
      border:1px dashed #D9D9D9;
      line-height: 50px;
      border-radius: 4px;
    }
    .btn-text{
      color: black;
    }
    .expand-table{
      width: 100%;
    }
    .el-form-item{
      margin-bottom: 16px;
      margin-top: 10px;
    }
    .el-icon-circle-plus-outline:hover{
      color: #3c6ef0;
    }
    .expand-table {
      /deep/ .el-icon-arrow-right::before {
        content: "\e590";
        color: #3c6ef0;
      }
    }

<template>
      <div>
        <FormTable
          size="mini"
          :table-data="tableData"
          :increment="increment"
          :table-cols="tableCols"
          @handleChange="handleChange"
          @changeChecked="changeChecked"
          @handleCkecked="handleCkecked"
          @removeAaary="removeAaary"
        />
        <el-button type="primary" size="medium" @click="submit">提交</el-button>
      </div>
    </template>
    
    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import FormTable from '@/components/formTable/index.vue'
    @Component({
      components: { FormTable }
    })
    export default class DemoformTable extends Vue {
      public increment: object = {
        title: '增值服务',
        settlement: '服务项默认结算方式:',
        receipt: '收件月结',
        charge: '增值服务费',
        addCommodity: '增加商品'
      }
      public tableData: any[] = [
        {
          skuModel: '',
          codeModel: '',
          mount: '',
          tradeName: '',
          open: false,
          childrenList: [
            { id: '1', name: '原包装丢失不取', type: '0', checked: false, price: 2 },
            { id: '2', name: '划痕超过3cm不取', type: '1', checked: false, price: 2 },
            { id: '3', name: '原包装破损不取', type: '0', checked: false, price: 2 },
            { id: '4', name: '商品已使用不取', type: '0', checked: false, price: 2 },
            { id: '5', name: '塑封包装不完整不取', type: '0', checked: false, price: 2 },
            { id: '6', name: '校验条码', type: '0', checked: false, price: 2 },
            { id: '7', name: '破损面积大于3cm不取', type: '1', checked: false, price: 2 },
            { id: '8', name: '无外包装不取', type: '0', checked: false, price: 2 },
            { id: '9', name: '破损面积大于3cm不取', type: '1', checked: false, price: 2 },
            { id: '10', name: '破损面积大于3cm不取', type: '1', checked: false, price: 2 },
            { id: '11', name: '测试项可配置', type: '0', checked: false, price: 2 },
            { id: '12', name: '无保修卡不取', type: '0', checked: false, price: 2 },
            { id: '13', name: '原包装丢失', type: '0', checked: false, price: 2 },
            { id: '14', name: '原包装丢失', type: '0', checked: false, price: 2 },
            { id: '15', name: '原包装丢失', type: '0', checked: false, price: 2 },
            { id: '16', name: '原包装丢失', type: '0', checked: false, price: 2 }
          ],
          selectAll: [
            { value: '全部全选', checked: false },
            { value: '检查附件全选', checked: false },
            { value: '检查外观全选', checked: false }
          ],
          btnList: [
            { type: 'text', label: '展开服务项' },
            { type: 'text', label: '删除' }
          ]
        }
      ]
      public tableCols: any[] = [
        { label: '商品名称',
          type: 'Input',
          prop: 'tradeName',
          column: true,
          rules: {
            tradeName: {
              required: true,
              trigger: 'blur',
              message: '请填写商品名称'
            }
          } },
        { label: '数量',
          type: 'Input',
          prop: 'mount',
          column: true,
          mold: 'number',
          rules: {
            mount: {
              required: true,
              trigger: 'blur',
              message: '请填写商品数量'
            }
          } },
        { label: 'SKU', type: 'Input', prop: 'skuModel' },
        { label: '商品条码', type: 'Input', prop: 'codeModel' },
        { label: '操作', type: 'Button' }
      ]
      public obj:any = {}
      public arr:any = []
      // input
      handleChange(obj: any) {
        this.obj = obj
      }
      // 单选
      changeChecked(radio: any) {
        this.arr = radio
        console.log(radio, '单选')
      }
      // 全选
      handleCkecked(all: any) {
        this.arr = all
        console.log(all, '全选')
      }
      // 删除
      removeAaary(item:any) {
        console.log(item, '删除')
      }
      submit() {
        console.log(this.obj, this.arr)
      }
    }
    </script>