Vue --自定义el-table-column头部的两种方法

1.在<el-table-column>上定义:render-header调用自定义表头方法，如图举例

2.在methods：{}方法里面自定义表头方法，如图举例

1.在<el-table-column>上使用scoped-slot

2.<template>绑定slot,然后自定义你所需要的内容

如图举例

vuewebupload怎么添加请求头部内容，最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId

查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到userId这事, 导致发送请求时总是报错500(internal server error)

在这里插入图片描述

接下来看一下如何使用Upload标签实现点击/拖拽上传

如何携带参数, 如何设置headers

<template>

<div>

<Row>

<Col>

<Upload

multiple

type="drag"

:data="submitData"

:headers="upHeaders"

action="/api/cs-dzjf-soa/api/v1/file/upload"

>

<div style="padding: 20px 0">

<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>

<p>点击或拖拽到此处上传</p>

</div>

</Upload>

</Col>

</Row>

</div>

</template>

<script>

import axios from "axios"

export default {

components: {},

name: "first",

data() {

return {

submitData: { // 这里是需要携带的数据

srcLanguage: "en",

tgtLanguage: "zh"

},

upHeaders: { // 这里设置的是请求头中的userId, 用于鉴权的

"userId": "fffffffffffffffffffffffffff"

}

}

},

}

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

效果图如下

在这里插入图片描述

Upload标签中配置的:data就是用于携带参数的, :headers是用于携带头信息的, 请求的url地址中开头位置的api是用于解决跨域的, 具体如何在前端解决跨域参考 前端解决跨域

**这里在headers中不需要配置Content-Type: multipart/form-data, 多此一举

后期补充的问题:

Upload中默认上传时的格式是

file: (binary)

1

1

这里现在使用的后台接口中, 用于接收上传文件的字段是是data, 那么这时候就需要在前台修改一下Upload默认的键名, 百度一番之后, 无果, 决定找一下源码看看, 源码也没找到有用的信息, 在一个github项目上找到了点信息

github地址

在这里插入图片描述

看到这句话 是不是觉得好像有点对症呢???没错, 就是这里可以设置

在这里插入图片描述

在这配置上name属性之后, 我们重新上传一下文件试试

现在已经成功的修改了

首先我们需要观察页面中有哪些组件是需要单独拆分出来独立维护的。一般来说具有以下特性即需要进行组件拆分：

具有复用性质的功能组件（上拉加载下拉刷新、tab切换、轮播等等）

公共组件（公共头部组件、侧边栏组件、公共尾部组件等等）

具有独立逻辑的组件（对话d框、tab页等等）

单文件中代码量庞大

2.2 引入

在父组件中引入子组件。

import Dialog from "./dialog/dialog"

登录后复制

2.3 注册

在父组件中注册组件。

注意： components 与 data(){return{}} 是同级的。

components: {

Dialog,

},

登录后复制

2.4 使用

在父组件中使用。

<div>

<Dialog />

</div>

登录后复制

看到这里，相信你对组件拆分已经有了初步的认识，下面我们用一个更加完整的实例带你深入剖析组件拆分。

我们就以对话d框为例写一个完整的组件拆分。案例中会用到组件传值，如果对此有疑惑，可参考博主另一篇文章 vue组件传值 。

文件结构

/views/popUp 根目录

/views/popUp/index.vue 父组件

/views/popUp/dialog/dialog.vue 子组件

登录后复制

要拆分的组件代码（父组件）

在这段代码中，:dialogChild 、:dialogRow 相当于是在父组件中给子组件标签上绑定了两个属性， 属性上挂载需要传递给子组件的值。.sync 是 vue 中的修饰符，用于实现父子组件数据双向绑定的语法糖。

<template>

<div class="outerBox">

<div>

<el-table :data="tableData" stripe border>

<el-table-column prop="phone" label="联系方式" align="center"></el-table-column>

<el-table-column prop="name" label="姓名" align="center"></el-table-column>

<el-table-column prop="age" label="年龄" align="center"></el-table-column>

<el-table-column prop="stature" label="身高" align="center"></el-table-column>

<el-table-column prop="address" label="住址" align="center"></el-table-column>

<el-table-column prop="c" label=" *** 作" align="center">

<template slot-scope="scope">

<el-button size="small" type="success" icon="el-icon-edit" @click="compileClick(scope.row)">编辑</el-button>

</template>

</el-table-column>

</el-table>

</div>

<!-- 自定义d框 -->

<div>

<Dialog :dialogChild.sync="editDialog.dialogLsattr" :dialogRow="editDialog.dialogRow" />

</div>

</div>

</template>

<script>

import Dialog from "./dialog/dialog"//引入d框组件

export default {

//一定要注册组件

components: {

Dialog,

},

data() {

return {

// 模拟数据

tableData: [

{

phone: "17730818218",

name: "小明",

age: "20",

stature: "173",

address: "昌平",

},

{

phone: "15587477741",

name: "小红",

age: "18",

stature: "162",

address: "海淀",

},

{

phone: "15513252258",

name: "小兰",

age: "19",

stature: "165",

address: "丰台",

},

{

phone: "15512554475",

name: "小黄",

age: "21",

stature: "175",

address: "朝阳",

},

],

// 父组件要传递的数据

editDialog: {

dialogRow: {}, //数据集合

dialogLsattr: false, //打开/关闭d框

},

}

},

mounted() {},

methods: {

// 编辑的点击事件

compileClick(row) {

this.editDialog.dialogRow = { ...row }

this.editDialog.dialogLsattr = true

},

},

}

</script>

<style scoped>

.outerBox {

padding: 16px 20px

}

</style>

登录后复制

被拆分的d框组件代码（子组件）

在这段代码中，子组件通过 props:['父组件标签中定义的属性名'] 来接收数据，当然，在 props 中，你可以通过 type 指定数据的类型，也可以通过 default 指定数据的关键字， default 简单来说就是没有值的时候默认的值。

其中，$emit('update:dialogChild', false) 会触发更新事件（update: props属性值），改变 dialogChild 的值。

<template>

<el-dialog title="标题" width="30%" :visible.sync="dialogVisible" @close="$emit('update:dialogChild', false)"></el-dialog>

</template>

<script>

export default {

data() {

return {

dialogVisible: false, //打开/关闭d框

dataList: {}, //接收数据集合

}

},

//通过props接收父组件传递的数据

props: {

//d框打开关闭的值

dialogChild: {

type: Boolean, //验证类型，也可以验证其他类型

default: false, //如果父组件传值，则用父组件的值渲染，反之使用默认值

},

//表格点击当前行的数据

dialogRow: {

type: Object,

default: false,

},

},

methods: {

//将方法放在监听当中是为了防止子组件在没有被调用之前就会执行其中方法

postRemoteSensingMonitoringDetails() {

console.log("执行方法 ")

}

},

//通过watch监听父组件传递的数据并赋值，然后动态改变d框的打开/关闭，动态改变数据的变化

watch: {

dialogChild(val) {

console.log("d框的状态:", val)

this.dialogVisible = val

this.postRemoteSensingMonitoringDetails()//调用方法

},

dialogRow(val) {

console.log("当前的数据:", { ...val })

this.dataList = val

},

},

}

</script>

登录后复制

最终实现效果

子组件中打印的值

---