zoukankan      html  css  js  c++  java
  • iview的table:自定义table表格中列头的标题和点击事件(renderHeader)

     <Table
               class="table"
               :columns="columns1"
               :data="tableData"
               highlight-row
               :max-height="500"
               border
               @on-selection-change="onSelectionChange"
               @on-row-click="onRowClick"
        >
          <!-- 重量 -->
          <template slot-scope="{ row, index }" slot="weight">
            <Input v-model="tableData[index].weight" placeholder="请输入..." class="form-width" />
          </template>
        </Table>
     
     
    columns1: [
              {
                title: '重量',
                slot: 'weight',
                align: 'center',
                key: 'weight',
                renderHeader: (h, params)  => {
                  return h('div',[
                    h('span', {}, '重量'),
                    h('Icon', {
                      props: {
                        type: 'ios-copy-outline',
                        size: '18'
                      },
                      on: {
                        'click': (event) => {
                          this.weightCopy(event);
                        }
                      }
                    })
                  ])
                },
              }
            ],
     
      // 重量值拷贝功能
          weightCopy(e){
            if (this.tableData.length && this.tableData[0].weight) {
              this.tableData.map((item, index) => {
                this.tableData.splice(index, 1, {
                  ...item,
                  weight: this.tableData[0].weight
                })
              })
            } else {
              this.$Message.warning('第一行值为空,不能复制!')
            }
          },
  • 相关阅读:
    网页中添加下划线的方法汇总及优缺点
    git备注
    微信小程序封装年月日时分组件
    微信小程序底部弹窗动画
    微信小程序返回上一页的方法并传参
    微信小程序组件封装
    taro中子父传值
    taro初识一
    reactjs中使用高德地图计算两个经纬度之间的距离
    vue中使用scss
  • 原文地址:https://www.cnblogs.com/wssdx/p/13268537.html
Copyright © 2011-2022 走看看