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

插槽写入列点击事件

js 复制代码
  <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>
js 复制代码
const dblclickColumnFun = (row, column, key) => {
  emit("DblclickColumEmit", row, column, key);
}
js 复制代码
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

相关推荐
Moment13 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
爱敲代码的小鱼13 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax
吹牛不交税14 小时前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
MZ_ZXD00115 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
铅笔侠_小龙虾15 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七16 小时前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
2501_9447114316 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜17 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
阔皮大师17 小时前
INote轻量文本编辑器
java·javascript·python·c#
lbb 小魔仙17 小时前
【HarmonyOS实战】React Native 表单实战:自定义 useReactHookForm 高性能验证
javascript·react native·react.js