vue+typescript Table 动态编辑表格

男娘i 2023-03-02 05:26 7阅读 0赞

子组件

<template>
      
      <section class="table-box">
        <el-table
          ref="baseTable"
          v-loading="loading"
          class="base-table"
          :data="tableData"
          :size="size"
          :show-header="true"
          :border="isBorder"
    
          @select="select"
          @select-all="selectAll"
          @cell-mouse-enter="cellMouseenter"
          @cell-mouse-leave="cellMouseleave"
        >
          
          <el-table-column v-if="isSelection" type="selection" align="center" />
          
          <el-table-column v-if="isIndex" type="index" fixed="left" :label="indexLabel" align="center" width="50">
            <template scope="scope">
              <span v-if="zero">{
       { '0'+`${scope.$index+1}` }}</span>
              <span v-else>{
       { scope.$index+1 }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            v-for="(item, index) in tableCols"
            :key="index"
            :fixed="item.fixed"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align"
            :sortable="item.sortable"
            :render-header="item.renderHeader?item.renderHeader:null"
          >
            
            <el-table-column
              v-for="(v,i) in item.columnList"
              :key="i"
              :prop="v.prop"
              :label="v.label"
              :width="v.width"
              :align="v.align"
              :sortable="v.sortable"
            >
              <template slot-scope="scope">
                
                <div v-if="v.type==='edit'">
                  <span v-if="!scope.row.flag">{
       { scope.row[v.prop] }}</span>
                  <el-form :model="scope.row" :rules="item.rules">
                    
                    <el-form-item v-if="scope.row.flag&&scope.row.edit&&v.cellAttrs.type==='input'" :prop="item.prop">
                      <el-input
                        v-model="scope.row[v.prop]"
                        @change="handleChange(scope.row,scope.row[v.prop],v)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scope.row.flag&&scope.row.edit&&v.cellAttrs.type==='cascader'" :prop="item.prop">
                      <InputLinkage :address-linkage="addressLinkageData" :default-value="scope.row.defaultValue" />
                      <el-input
                        v-model="scope.row[v.probable]"
                        @change="handleChange(scope.row,scope.row[v.probable],v)"
                      />
                    </el-form-item>
                  </el-form>
                </div>
                
                <div v-else>{
       { scope.row[v.prop] }}</div>
              </template>
            </el-table-column>
    
            <template slot-scope="scope">
              
              <p v-if="item.type === 'button'">
                
                <el-radio
                  v-if="item.isCheckbox"
                  v-model="radioValLocal"
                  :label="scope.row.id"
                  class="table-checkbox"
                  @change="changeCheckbox(radioValLocal,scope.row)"
                >
                  {
       { item.value }}
                </el-radio>
                
                <el-button
                  v-for="(btn, i) in item.btnList"
                  :key="i"
                  :type="btn.type"
                  :icon="btn.icon"
                  :circle="btn.circle"
                  :label="btn.label"
                  @click="changeEvent(scope.row,i)"
                >
                  <span v-if="btn.label"> {
       { btn.label }}</span>
                </el-button>
              </p>
              
              <p v-if="item.type === 'edit'&&scope.row.isButton" class="table-btn">
                <el-button
                  v-for="(btn, i) in item.btnList"
                  :key="i"
                  :type="btn.type"
                  :icon="btn.icon"
                  :circle="btn.circle"
                  :label="btn.label"
                  @click="changeEditTable(scope.row,i)"
                >
                  <p v-if="btn.label"> {
       { btn.label }}</p>
                </el-button>
              </p>
              
              <div v-if="!item.type">
                
                <el-button v-if="item.mold&&scope.row.failed" :type="item.mold" plain>{
       { scope.row[item.prop] }}</el-button>
                <span v-else :class="item.lose?'text-red':''">{
       { scope.row[item.prop] }}</span>
                
                <el-tooltip effect="dark" :placement="item.placement">
                  <div slot="content" class="text-wrapper">
                    {
       { scope.row[item.text] }}
                  </div>
                  <i v-show="scope.row.isIcon" :class="item.icon" />
                </el-tooltip>
              </div>
              
              <div v-if="item.type==='radius'">
                <span :class="scope.row.isRadius?'blue-radius':'orange-radius'" />
                <span>{
       { scope.row[item.prop] }}</span>
              </div>
              
              <el-tooltip v-if="item.type==='tooltip'" effect="dark" :placement="item.placement">
                <div slot="content" class="text-wrapper">
                  {
       { scope.row[item.text] }}
                </div>
                <p :class="item.lose?'table-tooltip':''">{
       { scope.row[item.prop] }}</p>
              </el-tooltip>
              
              <p v-if="item.type==='text'">
                <el-button type="text" @click="clickText(scope.row,item)">{
       { scope.row[item.prop] }}</el-button>
              </p>
              
              <div v-if="item.type==='fail'">
                <div v-if="scope.row[item.prop]||scope.row[item.probable]">
                  <p>{
       { scope.row[item.prop] }}</p>
                  
                  <p>{
       { scope.row[item.probable] }}</p>
                </div>
                
                <p v-else class="text-red">{
       { item.text }}</p>
              </div>
    
              
              <div v-if="item.type==='edit'">
                
                <span v-if="!scope.row.flag" @click="clickEdit(scope.row)">{
       { scope.row[item.prop] }}</span>
                
                <span v-if="scope.row.flag&&!scope.row.edit">{
       { scope.row[item.prop] }}</span>
                
                <el-form :model="scope.row" :rules="item.rules">
                  <el-form-item v-if="scope.row.flag&&scope.row.edit&&item.cellAttrs.type==='textarea'" :prop="item.prop">
                    <el-input
                      v-model="scope.row[item.prop]"
                      type="textarea"
                      resize="none"
                      :autosize="{ minRows:item.Min, maxRows:item.Max}"
                      :maxlength="item.textLength"
                      @change="handleChange(scope.row,scope.row[item.prop],item)"
                    />
                  </el-form-item>
                  
                  <el-form-item v-if="scope.row.flag&&scope.row.edit&&item.cellAttrs.type==='input'" :prop="item.prop">
                    <el-input
                      v-model="scope.row[item.prop]"
                      @change="handleChange(scope.row,scope.row[item.prop],item)"
                    />
                  </el-form-item>
                  
                  <el-form-item v-if="scope.row.flag&&scope.row.edit&&item.cellAttrs.type==='select'">
                    <el-select
                      v-model="scope.row[item.prop]"
                      @change="handleChange(scope.row,scope.row[item.prop],item)"
                    >
                      <el-option
                        v-for="(v,i) in item.options"
                        :key="i"
                        :label="v.label"
                        :value="v.value"
                      />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item v-if="scope.row.flag&&scope.row.edit&&item.cellAttrs.type==='cascader'" :prop="item.prop">
                    <InputLinkage :address-linkage="addressLinkageData" :default-value="scope.row.defaultValue" />
                    <el-input
                      v-model="scope.row[item.prop]"
                      @change="handleChange(scope.row,scope.row[item.prop],item)"
                    />
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </section>
    </template>
    <script lang="ts">
    /*
     *  动态渲染表格
     * 名称：Table
     * 作者：weihongyue
     */
    import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
    import InputLinkage from '@/components/InputLinkage/index.vue'
    @Component({
      components: {
        InputLinkage
      }
    })
    export default class BaseTable extends Vue {
      // 表格型号：big,small,mini
      @Prop({
        type: String,
        default: 'mini'
      })
      readonly size!: string
      // 是否有表格边框
      @Prop({
        type: Boolean,
        default: false
      })
      readonly isBorder!: boolean
      // 是否显示loading加载动画
      @Prop({
        type: Boolean,
        default: false
      })
      readonly loading!: boolean
      // 表格数据
      @Prop({
        type: Array,
        default: () => []
      })
      readonly tableData!: Array<any>
      // 表格列配置
      @Prop({
        type: Array,
        default: () => []
      })
      readonly tableCols!: Array<any>
      // 是否显示表格复选框
      @Prop({
        type: Boolean,
        default: false
      })
      readonly isSelection!: boolean
      // 是否显示表格索引
      @Prop({
        type: Boolean,
        default: false
      })
      readonly isIndex!: boolean
      @Prop({
        type: String,
        default: '序号'
      })
      readonly indexLabel!: string
      // zero为true 序号前边加0
      @Prop({
        type: Boolean,
        default: false
      })
      readonly zero!: boolean
      // 设置默认地址 radio value的值
      @Prop({
        type: Number,
        default: 1
      })
      readonly radioVal!: number
      // 城市联动数据
      @Prop({
        type: Object,
        default: () => null
      })
      readonly addressLinkageData!:any
      // 设置单选功能
      @Prop({
        type: Boolean,
        default: false
      })
      readonly singleChoice!: boolean
    
      @Watch('radioVal')
      parentRadioChange(newVal: number, oldVal: number) {
        this.radioValLocal = this.radioVal
      }
    
      // 默认地址radio绑定值
      public radioValLocal: any = 1
      // 表格勾选
      select(rows:any, row:object) {
        const tableDom: any = this.$refs.baseTable
        if (this.singleChoice) {
          tableDom.clearSelection()
          tableDom.toggleRowSelection(row)
          this.$emit('select', [rows.pop()], row)
        } else {
          this.$emit('select', rows, row)
        }
      }
      // 全选
      selectAll(rows:any) {
        const tableDom: any = this.$refs.baseTable
        if (this.singleChoice) {
          tableDom.clearSelection()
        } else {
          this.$emit('select', rows)
        }
      }
      // 修改删除传递事件 判断下标 index
      changeEvent(row:any, index:number) {
        this.$emit('modifyEvent', row, index)
      }
      // input change事件 row修改的当前项 value修改的值
      handleChange(row:object, value:any, item:object) {
        this.$emit('handleChange', row, value, item,)
      }
      // 点击鼠标悬停按钮
      changeEditTable(row:Object, index:number) {
        this.$emit('changeEditTable', row, index)
      }
      // 鼠标移入当前行事件
      cellMouseenter(row:Object) {
        this.$emit('cellMouseenter', row)
      }
      // 鼠标移出当前事件
      cellMouseleave(row:Object) {
        this.$emit('cellMouseleave', row)
      }
      // 点击Checkbox设置默认地址
      changeCheckbox(radioValLocal:any, row:object) {
        this.$emit('changeCheckbox', radioValLocal, row)
      }
      // 点击绑定值得文字按钮
      clickText(row:object, item:object) {
        this.$emit('clickText', row, item)
      }
      // 切换全选状态
      checkboxAll() {
        const el:any = this.$refs
        el.baseTable.toggleAllSelection()
      }
      // 取消选中
      toggleSelection(rows:any) {
        const el:any = this.$refs
        if (rows) {
          rows.forEach((row:any) => {
            el.baseTable.toggleRowSelection(row)
          })
        } else {
          el.baseTable.clearSelection()
        }
      }
      created() {
        this.radioValLocal = this.radioVal
      }
    }
    </script>
    <style lang="scss">
     @import '@/components/Table/index.scss'
    </style>

@import '@/assets/styles/themes.scss';
    .table-box{
      width: 100%;
    }
    .el-button--text{
      margin-right: 10px;
    }
    .add-ressee{
      text-align: center;
     }
     .base-table{
       width: 100%;
       .el-icon-circle-plus{
        color: #3c6ef0;
        vertical-align:middle
      }
      .table-tooltip{
        color: $mainColorRed;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .el-select-dropdown__list {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .table-btn{
        position: absolute;
      }
      
      .el-textarea{
        margin-top: 20px;
      }
      .el-radio.table-checkbox {
        margin-right: 10px;
      }
      .el-radio+button {
        margin-right: 10px;
      }
      .el-radio__label{
        padding-left: 5px;
        color: #3663d8;
      }
      .table-checkbox .el-checkbox__inner{
        border-radius: 50% !important;
      }
     }
     .text-wrapper{
      display: inline-block;
      max-width: 200px; 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: wrap;
      line-height: 18px;
      cursor: pointer;
    }

父组件

<template>
      <div>
        <base-table
          ref="baseTable"
          size="mini"
          :is-selection="true"
          :is-index="true"
          :zero="true"
          :is-border="false"
          :radio-val="1"
          :table-data="tableData"
          :table-cols="tableCols"
          :loading="Loading"
          :address-linkage-data="addressLinkageData"
          @select="changeSelect"
          @modifyEvent="modifyEvent"
          @handleChange="handleChange"
          @changeEditTable="changeEditTable"
          @clickText="clickText"
          @changeCheckbox="changeCheckbox"
          @cellMouseenter="cellMouseenter"
          @cellMouseleave="cellMouseleave"
        />
        <el-checkbox @change="change">
          全选
        </el-checkbox>
      </div>
    </template>
    
    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator'
    import BaseTable from '@/components/Table/index.vue'
    import Cookies from 'js-cookie'
    import API from '@/api'
    @Component({
      components: {
        BaseTable
      }
    })
    export default class demoTable extends Vue {
     public Loading: boolean=false
    public addRessee:string='添加收件人'
    // 城市联动
    public addressLinkageData: any = {
      placeholder: '请选择省市区',
      // options: fourLinkageOptions,
      api: this.getAddress, // 调取接口 参数要有id
      width: '100px' // 宽度
      // defaultValue: [20, 1746, 22851, 54657]// 默认值 数组里面放的地区id
    }
     public obj:object={}
     public tableCols: Array <any> = [
       { label: '失败原因', prop: 'A', lose: true, fixed: true, type: 'tooltip', placement: 'right-start', width: '200px', text: 'fail' },
       { label: '运单号', prop: 'G', type: 'text' },
       { label: '状态', prop: 'H', type: 'radius' },
       { label: '打印状态', prop: 'H', mold: 'danger' },
       { label: '姓名/公司', prop: 'name', type: 'fail', probable: 'company', text: '请完善姓名' },
       { label: '联系方式', prop: 'phone', type: 'fail', probable: 'tele', text: '请完善联系方式' },
       { label: '已打印次数', width: '200px', prop: 'T', placement: 'right-start', renderHeader: this.renderHeader, icon: 'el-icon-info-empty', text: 'fail' },
       { label: '收件人姓名', prop: 'M', width: '400px', type: 'edit', cellAttrs: { type: 'cascader' } },
       { label: '收件人姓名', align: 'center', columnList: [{ label: '修改前', prop: 'T' }, { label: '修改后', prop: 'M', type: 'edit', cellAttrs: { type: 'input' } }] },
       { label: '收件人联系地址', align: 'center', columnList: [{ label: '修改前', prop: 'city' }, { label: '修改后', prop: 'towns', probable: 'town', width: '400px', type: 'edit', cellAttrs: { type: 'cascader' } }] },
       { label: '商家定单号',
         prop: 'B',
         type: 'edit',
         sortable: true, // 排序
         width: '400px',
         Min: 1, // 文本域最小行数限制
         Max: 2, // 文本域最大行数限制
         textLength: 50, // 文本域字数长度限制
         cellAttrs: { type: 'textarea' },
         rules: {
           B: {
             required: true,
             trigger: 'change',
             validator: (rule:any, value:any, callback:Function) => {
               if (value.length >= 50) {
                 callback(new Error('最多显示两行'))
               } else {
                 callback()
               }
             }
           }
         } },
       { label: '运单状态',
         prop: 'C',
         type: 'edit',
         width: '400px',
         cellAttrs: { type: 'textarea' },
         rules: {
           C: {
             required: true,
             trigger: 'change',
             validator: (rule:any, value:any, callback:Function) => {
               if (value.length >= 48) {
                 callback(new Error('最多显示两行'))
               } else {
                 callback()
               }
             }
           }
         } },
       { label: '修改前包裹数',
         prop: 'D',
         type: 'edit',
         width: '100px',
         cellAttrs: { type: 'input' }
       },
       { label: '修改后包裹数',
         prop: 'E',
         type: 'edit',
         width: '100px',
         cellAttrs: { type: 'select' },
         options: [
           { value: '1', label: '食品' },
           { value: '2', label: '鲜花' },
           { value: '3', label: '文件' },
           { value: '4', label: '数码产品' },
           { value: '5', label: '珠宝首饰' }
         ] },
       {
         label: '商品',
         prop: 'F',
         type: 'edit',
         width: '100px',
         cellAttrs: { type: 'input' },
         btnList: [
           {
             type: 'primary',
             icon: 'el-icon-edit',
             circle: true
           },
           {
             type: 'primary',
             icon: 'el-icon-delete',
             circle: true
           }
         ]
       },
       {
         label: '操作',
         type: 'button',
         isCheckbox: true,
         value: '设为默认地址',
         width: '300px',
         btnList: [{ type: 'text', label: '修改' }, { type: 'text', label: '删除' }]
       }
     ]
     public tableData:any[]=[
       {
         A: '1231111111111111111111111111',
         B: '文本域修改',
         C: 'zxcv',
         D: 1,
         E: 2,
         F: '111111',
         G: '123',
         H: '已打印',
         T: '1次',
         M: '12',
         city: '北京市通州区',
         town: '梨园东里南区',
         towns: '北京市通州区梨园东里南区',
         name: '',
         company: '京东',
         phone: '17602637509',
         tele: '12802759988',
         defaultValue: [20, 1746, 22851, 54657],
         id: 1,
         // 是否设置默认地址
         isAddress: false,
         address: '这是默认地址1',
         fail: '这是失败提示的文字1diudjdkjksjkjdkjskdkkdkdkdkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkdkkkkkkkkkkkkkkkkkkk',
         //  当前项是否可编辑
         edit: true,
         // 点击按钮显示修改状态
         flag: false,
         //  鼠标悬停显示按钮
         isButton: false,
         //  是否显示圆点
         isRadius: true,
         // 是否显示图标
         isIcon: true
       },
       {
         A: '45611111111111111111111',
         C: '789',
         B: '文本域修改',
         D: 1,
         E: 2,
         id: 2,
         F: '111111',
         G: '123',
         H: '未打印',
         T: '1次',
         M: '12',
         name: '李四',
         company: '',
         city: '北京市通州区',
         town: '梨园东里南区',
         towns: '北京市通州区梨园东里南区',
         phone: '17602637509',
         tele: '',
         address: '这是默认地址2',
         defaultValue: [20, 1746, 22851, 54657],
         fail: '这是失败提示的文字dhhdkjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj2',
         flag: false,
         isButton: false,
         isIcon: true,
         // 打印失败显示按钮
         failed: true
       },
       {
         A: '0981111111111111111111111111111111111111111111',
         C: '789',
         B: '文本域修改',
         D: 1,
         E: 2,
         id: 3,
         F: '111111',
         G: '123',
         H: '已打印',
         T: '0次',
         M: '12',
         name: '王五',
         company: '京东',
         city: '北京市通州区',
         town: '梨园东里南区',
         towns: '北京市通州区梨园东里南区',
         isAddress: false,
         address: '这是默认地址3',
         defaultValue: [20, 1746, 22851, 54657],
         fail: '这是失败提示dddddddddddhhhhhhhjdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd的文字3',
         edit: true,
         flag: false,
         isIcon: false,
         isButton: false,
         isRadius: true
       },
       {
         A: '0981111111111111111111111111111111111111111111',
         C: '789',
         B: '文本域修改',
         D: 1,
         E: 2,
         id: 4,
         F: '111111',
         G: '123',
         H: '已打印',
         T: '0次',
         name: '',
         company: '',
         phone: '',
         city: '北京市通州区',
         town: '梨园东里南区',
         towns: '北京市通州区梨园东里南区',
         tele: '17602637509',
         defaultValue: [20, 1746, 22851, 54657],
         isAddress: false,
         address: '这是默认地址3',
         fail: '这是失败提示dddddddddddhhhhhhhjdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd的文字3',
         edit: true,
         flag: false,
         isButton: false,
         isIcon: false,
         isRadius: true
       }
     ]
     changeSelect(rows:any, row:any) {
       console.log(rows, row)
     }
     modifyEvent(row:any, ind:number) {
       console.log(row, ind)
     }
     //  input修改事件
     handleChange(row:any, value:any, item:any) {
       this.obj = row
       console.log(this.obj, value, item)
     }
     //  点击悬停按钮事件
     changeEditTable(row:any, index:number) {
       if (index === 0) {
         this.tableData.forEach((v:any) => { v.flag = false })
         row.flag = true
       } else {
         this.tableData.splice(row, 1)
       }
       console.log(row, index)
     }
     // 点击绑定有prop值的文字按钮
     clickText(row:object, item:any) {
       console.log(row, item)
     }
     // 鼠标移入事件
     cellMouseenter(row:any) {
       row.isButton = true
     }
     // 鼠标移出事件
     cellMouseleave(row:any) {
       row.isButton = false
     }
     changeCheckbox(radio:any, row:any) {
       console.log(radio, row)
     }
     // 切换全选状态
     change() {
       const el:any = this.$refs
       el.baseTable.checkboxAll()
     }
     // 表头添加自定义图标
     renderHeader(h:any, { column }:any) {
       return h(
         'div', [
           h('span', column.label),
           h('el-tooltip', {
             props: {
               effect: 'dark',
               content: '这是一个提示',
               placement: 'right-start'
             }
           },
           [
             h('i', {
               class: 'el-icon-info-empty',
               style: 'margin-left:5px;'
             })
           ])
         ]
       )
     }
     async getAddress(id: string) {
       try {
         const params = [{
           addressId: id || '4744',
           userPin: await Cookies.get('pin'),
           callback: 'test'
         }]
         const response = await API.getAddress(params)
         return JSON.parse(response.data.data.match(/$(.*)$/)[1])
       } catch (error) {
         console.log(error)
       }
     }
    }
    </script>
    
    <style lang="scss" scope>
    
    </style>