当前位置: 首页 > article >正文

layui-vue第三方库表格列事件怎么写

插槽写入列点击事件

  <div class="le-table-box" ref="TableBoxRef" :style="{ height: ShowPage ? 'calc(100% - 60px)' : '100%' }">
      <lay-table @row-double="dbRowClick" :columns="TableColumn" :data-source="TableData" :max-height="tableHeight"
        :rowClassName="RowClassChange" :id="CheckKey" v-model:[TableType]="SelectedKey" @on-select="handleSelect"
        @row="rowClick" ref="LayTableRef" v-bind="TableConfig">
        <!-- 通过自定传入插槽实现 -->
        <template #date="{ row, column }"> 
          <span>{{ formatterDate(row[column.key]) }}</span>
        </template>
        <template #image="{ row, column }">
          <img :src="row[column.key]" alt="" srcset="" @error="imgLoadError">
        </template>
        <template v-slot:operator="{ row, rowIndex }">
          <slot name="Controls" :index="rowIndex" :row="row" />
        </template>
        <template #cell="{ row, column }"> 
          <span @dblclick="dblclickColumnFun(row, column, row[column.key])">{{ row[column.key] }}</span>
        </template>
      </lay-table>
      <div v-if="IsSwitchObj.isShow && TableData.length" class="switch-btn-group"
        :style="{ right: switchRight, top: switchTop }" @click="switchBtnClick">
        <img v-show="!switchRight" src="@/assets/nav_icon/switch-left.png" alt srcset />
        <img v-show="switchRight" src="@/assets/nav_icon/switch-right.png" alt srcset />
      </div>
    </div>
const dblclickColumnFun = (row, column, key) => {
  emit("DblclickColumEmit", row, column, key);
}
const tableColumn = ref([
    {
        title: "点位名称",
        key: "name",
        width: "120px",
        align: "center",
        ellipsisTooltip: true, // 内容超出隐藏
    },
    {
        title: "编号",
        key: "indexCode",
        width: "180px",
        align: "center",
        ellipsisTooltip: true,
    },
    {
        title: "违规数",
        key: "num",
        width: "180px",
        align: "center",
        ellipsisTooltip: true,
        customSlot:'cell',
    }, {
        title: "审核流转数",
        key: "liuzhuan",
        width: "180px",
        align: "center",
        ellipsisTooltip: true,
        customSlot:'cell',
    },
    {
        title: "利用率",
        key: "liyl",
        width: "180px",
        align: "center",
        ellipsisTooltip: true,
    }
])

row
在这里插入图片描述column
在这里插入图片描述


http://www.kler.cn/a/415815.html

相关文章:

  • 人工智能之数学基础:欧式距离及在人工智能领域中的应用
  • 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(6)
  • 牛客 ZT13 小红的数字删除
  • go每日一题:mock打桩、defer、recovery、panic的调用顺序
  • 【Linux】进程控制-----进程等待wait与waitpid
  • 用Go语言重写Linux系统命令 -- ping
  • Python读取摄像头视频并将其保存为MP4文件
  • 利用Java爬虫获得店铺详情:技术解析
  • KUKA机器人中断编程5—自动回原点功能的编程
  • 工程企业如何做好成本控制?该如何入手?
  • 和鲸科技创始人CEO范向伟出席首届工业智算产业发展研讨会,共话 AI 创新与产业化落地
  • 在windows系统中安装python并确认安装成功
  • 中信建投张青:以金融智慧点亮公益新篇章
  • Flink的双流join理解
  • 一次完整的CNAS软件测试实验室内部审核流程
  • Ubuntu-20.04安装 terminator
  • Spring Boot教程之十二: Spring – RestTemplate
  • [巅峰极客 2021]签到
  • 如何具体实现商品详情的提取?
  • 等保测评在云计算方面的应用讲解