elementUi的表格取值和fontawesome在vue中使用

发布于 2019-12-16  37 次阅读


在使用UI库的时候很方便,但是elementui表格是封装好的,每一行的数据是根据data下那个数组进行渲染数据,所以要对表格动态进行修改,必须获取每一行的具体id值

通过<template slot-scope='scope'>来定义当前行的数据对象,然后通过scope.row来获取当前行的数据

<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" @click="open(scope.row)" circle>
</el-button>
</template>

安装Fontawesome

  • npm i --save @fortawesome/fontawesome
  • npm i --save @fortawesome/vue-fontawesome
  • npm i --save @fortawesome/fontawesome-free-solid
    npm i --save @fortawesome/fontawesome-free-regular
    npm i --save @fortawesome/fontawesome-free-brands
在main.js下配置 
import fontawesome from '@fortawesome/fontawesome'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome" //这里需要用{}引入,否则会抛出警告
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)

Vue.component('font-awesome-icon', FontAwesomeIcon)

爬。