Element Plus Table(表格)点击获取对应 id

网上搜到的内容或许适用于 vue 2 或 Element UI,不适用 vue 3 和 Element Plus。

template:

<el-table-column label="配置" width="120" align="center">
  <template v-slot="scope">
    <el-button link type="primary" size="small">编辑</el-button>
    <el-button link type="primary" @click="deleteNavigation(scope.row.id)" size="small">删除
    </el-button>
  </template>
</el-table-column>

script:

function deleteNavigation(id) {
  console.log(id);
}

使用 vue 的 v-slot 指令,这个指令中是 vue 2.6 新增的,取代了以前的 slot 和 slot-scope,而我使用的是 vue 3,所以网上搜到的很多使用 slot-scope 的方法都失效了。

使用 插槽名.row 可以获取一行的内容,如果要获取行内的某一个字段的值,只需要再点出它的字段名,在我的代码里,就是 scope.row.id

如果要获取行的索引,使用 插槽名.$index,注意$符号是必不可少的,否则将不起作用。

[] == false 和 !![] == true 解析

==是相等操作符,先转换再比较;===是全等操作符,仅比较不转换。

[] == false 解析

右侧布尔值很简单,直接转换成 0

[] 不是基本数据类型,它是对象,所以需要调用 valueOf 方法(Array.prototype.valueOf() ,但是 Array 没有实现 valueOf 方法,所以根据原型链,最终调用的是 Object.prototype.valueOf):

[].valueOf():得到的仍然是 [] ,继续调用 toString 方法(Array.prototype.toString()):

[].toString():得到""

""作为基本数据类型直接调用 Number("") 得到 0

所以最终结果是 true


!![] == true

!!== 的优先级更高,所以先看 !![]

![] 得到 false (操作数是对象的话逻辑非返回 false),然后再取非,得到 true

很明显,true == true 得到的结果是 true

Vue 3 兄弟组件间传值

Vue 3 中兄弟间传值可以使用 Vuex,但小项目使用过于庞大,我们可以使用 mitt 进行兄弟组件间传值。

操作步骤

第一步:安装 mitt

npm i mitt

第二步:创建文件(例如:eventBus.js

import mitt from 'mitt'

const emitter = mitt()
export default emitter

第三步:将该文件引入至需要进行发送及接受的 .vue 文件中

import emitter from "../untils/bus";

第四步:发送端写入下列代码

emitter.emit("response", response)

前面是事件,后面是要传入的参数

第五步:接收端写入下列代码

emitter.on("response", (response) => {
    console.log(response)
})

这样两个组件间就可以进行传值通信了。

Vue 3 锚点实现方式

当我们使用 Vue 3 有时候需要做业内锚点跳转,使用传统的 a href 已经不是很推荐了,我们可以尝试采用以下方法来进行替代

标题锚点

<div class="cardTagContainer">
    <div class="cardTag" v-for="(cardGroup,index) in card.cardInfo" :key="cardGroup" @click="goAnchor('#tag' + index)">
        {{ cardGroup.title }}
    </div>
</div>

跳转内容

<h1 :id="'tag' + index">
    {{ cardGroup.title }}
</h1>

相关方法

// 标题锚点
function goAnchor(selector) {
    // console.log(selector)
    document.querySelector(selector).scrollIntoView({
        behavior: "smooth",
        block: "start"
    });
}

.scrollIntoView 属性方法

scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的可见区域。

PS:根据其他元素的布局,元素可能无法完全滚动到顶部或底部。

TIPS:页面(容器)可滚动时才有用!


element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // 布尔参数
element.scrollIntoView(scrollIntoViewOptions); // 对象参数