技术标签: 前端 vue.js javascript
先封装个小功能组件
// 超出现实省略号,悬浮tootip提示
// cellExpand.vue
<template>
<el-tooltip
effect="dark"
:content="contentHover"
placement="top"
:disabled="isShowTooltip"
>
<div class="overview_container" @mouseover="onMouseOver()">
<span ref="name">{
{
content }}</span>
</div>
</el-tooltip>
</template>
<script>
export default {
props: {
content: {
default: ""
}
},
data() {
return {
isShowTooltip: false,
contentHover: ""
};
},
methods: {
onMouseOver() {
const tag = this.$refs.name;
const parentWidth = tag.parentNode.offsetWidth;
const contentWidth = tag.offsetWidth;
this.isShowTooltip = contentWidth <= parentWidth;
this.contentHover = String(this.content);
}
}
};
</script>
<style type="text/css" scoped>
.overview_container {
width: 100%;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
接下来开始封装我们的组件
// richDataTable.vue
<template>
<div class="common-table">
<el-table
ref="table"
:data="tableData.data"
v-loading="tableData.loading"
border
highlight-current-row
v-bind="tableProps"
v-on="$listeners"
>
<el-table-column
v-if="isCheckbox"
:reserve-selection="!!tableProps['row-key']"
type="selection"
width="50"
/>
<el-table-column
v-for="(item, index) in columns"
:key="index"
:align="item.align ? item.align : 'center'"
v-bind="item"
>
<template slot-scope="scope">
<slot :name="item.prop" :row="scope.row">
<cell-expand
:content="
item.formatter
? item.formatter(scope.row)
: scope.row[item.prop]
"
></cell-expand>
</slot>
</template>
</el-table-column>
</el-table>
<el-pagination
background
v-if="showPage"
@size-change="refresh"
@current-change="refresh"
:current-page.sync="pageConf.current"
:page-sizes.sync="pageConf.pageOption"
:page-size.sync="pageConf.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pageConf.total"
v-bind="paginationProps"
>
</el-pagination>
</div>
</template>
<script>
export default {
props: {
tableProps: {
type: Object,
default: () => ({
})
},
paginationProps: {
type: Object,
default: () => ({
})
},
columns: {
type: Array,
default: () => []
},
isCheckbox: {
type: Boolean,
default: false
},
api: {
type: Function,
default: () => Promise.resolve()
},
params: {
type: Object,
default: () => ({
})
},
showPage: {
type: Boolean,
default: true
},
reserveSelection: {
type: Boolean,
default: false
}
},
data() {
return {
tableData: {
data: [],
loading: false
},
pageConf: {
current: 1,
size: 10,
total: 0,
pageOption: [10, 20, 50]
}
};
},
methods: {
reload() {
this.pageConf.current = 1;
this.refresh();
},
refresh() {
this.$nextTick(() => {
const params = this.showPage
? {
current: this.pageConf.current, size: this.pageConf.size }
: {
};
this.tableData.loading = true;
this.api({
...this.params, ...params })
.then(res => {
if (this.showPage) {
this.tableData.data = res.data.records;
this.pageConf.total = res.data.total;
} else {
this.tableData.data = res.data;
}
})
.finally(() => {
this.tableData.loading = false;
});
});
},
reset() {
this.tableData = {
data: [],
loading: false
};
this.pageConf = {
current: 1,
size: 10,
total: 0,
pageOption: [10, 20, 50]
};
}
},
computed: {
tableRef() {
return this.$refs.table;
}
}
};
</script>
<style lang="scss" scoped></style>
请求接口部分要和后端约定返回的格式!
// api.js
export const api = (params) => axios.get('/getlist', {
params: params})
}
// api.js
</template>
<rich-data-table
ref="richDataTable"
:columns="columns"
:api="api"
:params="params"
>
<template slot-scope="scope" slot="action">
<el-button type="text" @click="openDialog(scope.row)"
>操作</el-button
>
</template>
</rich-data-table>
</template>
import {
api } from "./api";
export default {
data() {
return {
api,
params: {
destination: "",
strFlightDate: "",
endFlightDate: ""
},
columns: [
{
prop: "action", label: "操作", width: "80", fixed: true },
{
prop: "status", label: "货物状态", formatter: this.formatter, },
{
prop: "destination", label: "货物目的港" },
{
prop: "confirmPieces", label: "收货件数" },
{
prop: "confirmWeight", label: "收货重量" },
{
prop: "assembledPieces", label: "出港件数" },
{
prop: "assembledWeight", label: "出港重量" }
],
};
},
methods: {
handleSearch() {
this.$refs["richDataTable"].reload();
},
formatter(row) {
const DICT = {
0: "未收单",
1: "已收单"
};
return DICT[row.receiveStatus];
},
},
mounted() {
this.$refs["richDataTable"].reload();
}
};
</script>
// 处理复杂的params
computed: {
params() {
const {
flightIndex } = this.query;
const {
flightNo, flightDate } = this.flightNoList[flightIndex] || {
};
return {
flightNo,
flightDate
};
}
},
// 允许用户多选,并且根据row-key设置勾选状态,使其不会随着切换分页而丢失
<rich-data-table
ref="richDataTable"
:columns="columns"
:api="api"
:params="params"
:showPage="false"
isCheckbox
:tableProps="{ 'row-key': record => record.awbCode }"
@selection-change="handleSelectionChange"
/>
写惯了jsx想在columns里通过render方法自定义column,发现vue不支持,只能通过具名插槽的形式,希望有朋友可以给点优化建议。
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下:http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态:[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
文章浏览阅读1.3w次,点赞45次,收藏99次。我个人用的是anaconda3的一个python集成环境,自带jupyter notebook,但在我打开jupyter notebook界面后,却找不到对应的虚拟环境,原来是jupyter notebook只是通用于下载anaconda时自带的环境,其他环境要想使用必须手动下载一些库:1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
文章浏览阅读5.2k次,点赞19次,收藏28次。选择scoop纯属意外,也是无奈,因为电脑用户被锁了管理员权限,所有exe安装程序都无法安装,只可以用绿色软件,最后被我发现scoop,省去了到处下载XXX绿色版的烦恼,当然scoop里需要管理员权限的软件也跟我无缘了(譬如everything)。推荐添加dorado这个bucket镜像,里面很多中文软件,但是部分国外的软件下载地址在github,可能无法下载。以上两个是官方bucket的国内镜像,所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
文章浏览阅读4.5k次,点赞2次,收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了,例如:这里的:sty..._vue el-color-picker
文章浏览阅读640次。基于芯片日益增长的问题,所以内核开发者们引入了新的方法,就是在内核中只保留函数,而数据则不包含,由用户(应用程序员)自己把数据按照规定的格式编写,并放在约定的地方,为了不占用过多的内存,还要求数据以根精简的方式编写。boot启动时,传参给内核,告诉内核设备树文件和kernel的位置,内核启动时根据地址去找到设备树文件,再利用专用的编译器去反编译dtb文件,将dtb还原成数据结构,以供驱动的函数去调用。firmware是三星的一个固件的设备信息,因为找不到固件,所以内核启动不成功。_exynos 4412 刷机
文章浏览阅读2w次,点赞24次,收藏42次。Linux系统配置jdkLinux学习教程,Linux入门教程(超详细)_linux配置jdk
文章浏览阅读3.3k次,点赞5次,收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图:_matlab微米怎么输入
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件,可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中,对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数,而关闭则使用fclose函数。在C语言中,可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量:7 ️文章类型:【 C语言程序设计 】在C语言中,用于打开文件的函数是____,用于关闭文件的函数是____。
文章浏览阅读3.4k次,点赞2次,收藏13次。跟随鼠标移动的粒子以grid(SOP)为partical(SOP)的资源模板,调整后连接【Geo组合+point spirit(MAT)】,在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in(CHOP)鼠标位置到metaball的坐标,实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
文章浏览阅读178次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多,会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析,后面会慢慢更新。另外,博客只作为自己学习记录的一种方式,对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
文章浏览阅读2.4k次,点赞41次,收藏13次。java 数据结构与算法 ——快速排序法_快速排序法