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('第一行值为空,不能复制!')
            }
          },
  • 相关阅读:
    Saltstack_使用指南09_远程执行-编写执行模块
    Saltstack_使用指南08_远程执行-返回程序
    Saltstack_使用指南07_远程执行-执行模块
    Saltstack_使用指南06_远程执行-指定目标
    CentOS7 Docker私有仓库搭建及删除镜像 【转】
    Python Docker 查看私有仓库镜像【转】
    Saltstack_使用指南05_数据系统-Pillar
    Saltstack_使用指南04_数据系统-Grains
    Saltstack_使用指南03_配置管理
    Saltstack_使用指南02_远程执行-验证
  • 原文地址:https://www.cnblogs.com/wssdx/p/13268537.html
Copyright © 2011-2022 走看看