element ui 表格与锚点定位

最新推荐文章于 2024-07-19 12:58:53 发布

Mirs_Zhu

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量814

点赞数 7

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Mirs_Zhu/article/details/140539685

版权

父组件表格页面代码：

标的事件

</div>

{{ similarEventDate

}}{{ queryInfo.symbol }}{{ queryInfo.shortname

}}{{ queryInfo.eventtypename }}{{ pilesNum }}万股

</p>

</div>

事件表格

</div>

<Table

:heads="columns"

:data="tableData"

:maxheight="500"

:haspage="false"

class="table-item"

@sortChange="sortChange"

@goToSimilarDetail="goToSimilarDetail"

</div>

</template>

import Table from '@/components/TableDynamic/index.vue' // 引入table组件

import {

querySimilarEventData

} from '@/api/queryEvent' // 后端接口

import { mapState } from 'vuex'

export default {

components: {

Table

data() {

return {

queryInfo: {},

code: '', // 代码

eventType: '', // 事件类型

eventDate: '', // 事件时间

similarEventDate: '', // 事件时间

pilesNum: '', // 股数

detailInfo: {}, // 明细概述信息

columns: [

{

label: '事件名称',

width: 160,

sortable: true,

prop: 'eventname'

{

label: '代码',

width: 93,

sortable: true,

prop: 'symbol'

{

label: '事后1日涨跌幅',

type: 'percent',

sortable: true,

prop: 'onedayratio'

{

label: '事后3日涨跌幅',

sortable: true,

type: 'percent',

prop: 'threedayratio'

{

label: '事后5日涨跌幅',

sortable: true,

type: 'percent',

prop: 'fivedayratio'

{

label: '事件偏向',

sortable: true,

prop: 'eventbias',

type: 'deviation'

{

label: '相似度',

sortable: true,

prop: 'similarvalue'

}

tableData: [],

sortBackupData: []

}

computed: {

...mapState({

eventDisplayInfo: (state) => state.event.eventDisplayInfo

})

watch: {

eventDisplayInfo: {

handler(newObj) {

this.code = newObj.symbol || ''

this.eventType = newObj.eventtype || ''

this.eventDate = newObj.eventdate || ''

this.queryInfo = newObj || {}

this.getSimilarEventData()

deep: true

}

created() {},

mounted() {

　　// 页面路径所传参数

this.code = this.$route.query.symbol || ''

this.eventType = this.$route.query.eventtype || ''

this.eventDate = this.$route.query.eventdate || ''

this.queryInfo = this.$route.query || {}

this.similarEventDate = this.getDate(this.$route.query.eventdate.split(' ')[0])

this.getSimilarEventData() // 获取表格数据

methods: {

// 获取表格数据

getSimilarEventData() {

const date = this.eventDate.split(' ')[0]

if (!date) {

this.tableData = []

return

}

const params = {

symbol: this.code,

eventdate: date,

size: 10

}

querySimilarEventData(params).then((res) => {

const data = res.similarItems || []

const arr = []

this.pilesNum = res.Listedshares

data.forEach(el => {

el.similarvalue = this.toDecimal(this.numMul(el.similarvalue, 100)) + '%'

arr.push(el)

})

this.tableData = arr

Object.assign(this, {

tableData: this.tableData,

sortBackupData: this.tableData

})

sessionStorage.setItem('tableData', JSON.stringify(this.tableData))

})

// 格式化日期

getDate(date) {

const date1 = new Date(date)

// 获取年份、月份和日期

const year = date1.getFullYear()

const month = date1.getMonth() + 1 // 注意月份从0开始计数，所以需要加上1得到真正的月份（12）

const day = date1.getDate()

return `${year}年${month}月${day}日`

// 排序

sortChange({ column, prop, order }) {

if (column.sortable === 'custom') {

if (order) {

const { tableData } = this

this.tableData = this.customSortBuyProp(order, tableData, prop)

} else {

this.tableData = this.sortBackupData

}

/**

* 根据选定prop排序(无效值排最后)

* @param {String} order 排序顺序ascending/descending

* @param {Array} data 数据

* @param {String} prop 排序属性

* @param {Array} invalidList 无效值定义

customSortBuyProp(order, data, prop, invalidList) {

if (!order) {

return data

}

invalidList = invalidList || [null, undefined, '', '/']

const isAsc = order === 'ascending'

const effectiveArr = [] // 参与排序的数据

const invalidArr = [] // 不参与排序的数据

data.forEach((item) => {

const value = item[prop]

if (invalidList.includes(value)) {

invalidArr.push(item)

} else {

effectiveArr.unshift(item)

}

})

effectiveArr.sort((a, b) => {

const aValue = a[prop]

const bValue = b[prop]

if (aValue > bValue) {

return isAsc ? 1 : -1

} else if (aValue < bValue) {

return isAsc ? -1 : 1

} else {

return 0

}

})

return effectiveArr.concat(invalidArr)

// 跳转详情页面

goToSimilarDetail(row) {

let arr = []

arr = [

{ event_date: this.eventDate.substring(0, 10),

event_type: Number(this.eventType),

shortname: this.queryInfo.shortname,

symbol: this.code },

{ event_date: row.eventdate.substring(0, 10),

event_type: row.eventtype,

shortname: row.shortname,

symbol: row.symbol }

]

sessionStorage.setItem('similarParams', JSON.stringify(arr))

const routeUrl = this.$router.resolve({

path: '/similarDetail/index',

query: row

})

window.open(routeUrl.href, '_blank')

}

</script>

.baseDataPopper {

.content-box {

max-width: 500px;

max-height: 400px;

overflow-y: auto;

white-space: pre-line;

}

</style>

.wrapper {

padding: 0 16px 20px;

background: #ffffff;

box-sizing: border-box;

-webkit-box-sizing: border-box;

.table-item {

padding: 0;

/deep/.table-box {

padding: 0;

}

.overview-box {

margin-bottom: 16px;

border: 1px solid #e6e6e6;

border-top: none;

.con-txt {

padding: 0px 17px 10px;

margin: 0;

line-height: 24px;

font-size: 14px;

color: #666666;

.spec {

font-weight: bold;

color: #f33030;

cursor: pointer;

border-bottom: 1px dashed #f33030;

&:hover {

color: #1e81ff;

border-bottom: 1px dashed #1e81ff;

}

.box-name {

padding: 0 16px;

display: flex;

align-items: center;

height: 44px;

font-size: 14px;

font-weight: bold;

color: #333333;

box-sizing: border-box;

-webkit-box-sizing: border-box;

.flag {

margin-right: 8px;

width: 5px;

height: 14px;

background: #1e81ff;

border-radius: 0px 2px 2px 0px;

}

.item-title {

margin: 26px 0 16px;

padding-left: 14px;

height: 28px;

line-height: 28px;

font-size: 14px;

font-weight: 600;

color: #333333;

background: url("~@/assets/images/title_bg.png") no-repeat;

background-size: 130px 100%;

position: relative;

&::before {

position: absolute;

content: "";

top: 5px;

left: 0;

width: 3px;

height: 18px;

background: #1e81ff;

}

.pagin-box {

margin-top: 20px;

padding-top: 20px;

text-align: center;

position: relative;

&::before {

position: absolute;

content: "";

top: 0;

left: -16px;

right: -16px;

height: 1px;

background: #eeeff1;

}

/deep/.pub-pagin-box {

.el-pagination.is-background .btn-next,

.el-pagination.is-background .btn-prev,

.el-pagination.is-background .el-pager li {

font-size: 12px;

font-weight: normal;

color: #666666;

background: #f6f6f6;

border-radius: 3px;

}

.el-pagination.is-background .el-pager li:not(.disabled).active {

color: #ffffff;

background-color: #1e81ff;

}

.el-pagination.is-background .btn-next.disabled,

.el-pagination.is-background .btn-next:disabled,

.el-pagination.is-background .btn-prev.disabled,

.el-pagination.is-background .btn-prev:disabled,

.el-pagination.is-background .el-pager li.disabled {

color: #c0c4cc;

}

.el-pagination__jump,

.el-input__inner {

font-size: 12px;

color: #666666;

}

.chart-area {

margin-top: 26px;

padding: 10px 0;

width: 100%;

height: 380px;

background: #ffffff;

border: 1px solid #e6e6e6;

box-sizing: border-box;

-webkit-box-sizing: border-box;

}

/deep/.detail-dialog {

.el-dialog__header {

padding-top: 15px;

padding-bottom: 15px;

border-bottom: 1px solid #f3f3f3;

}

.title-box {

font-size: 16px;

position: relative;

.iconfont {

position: absolute;

right: 0;

cursor: pointer;

}

.el-dialog__body {

max-height: 350px;

min-height: 200px;

overflow-y: auto;

}

.content-box {

display: flex;

flex-wrap: wrap;

.item {

margin-bottom: 20px;

display: flex;

flex-shrink: 0;

width: 50%;

padding-right: 10px;

box-sizing: border-box;

&:nth-of-type(2n) {

padding-right: 0;

padding-left: 10px;

}

.name {

width: 120px;

font-weight: bold;

}

.con {

margin-left: 10px;

flex: 1;

}

</style>

table组件代码：

<el-table

ref="table"

:data="data"

:height="height === 0 ? undefined : height"

:max-height="maxheight === 0 ? undefined : maxheight"

:highlight-current-row="highlightCurrentRow"

:empty-text="emptyText"

:span-method="spanMethod"

:size="size"

:row-class-name="rowclassname"

:tree-props="treeProps"

:row-key="rowKey"

:row-style="size == 'small' ? { height: '30px' } : {}"

:cell-style="size == 'small' ? { padding: '0px' } : {}"

:stripe="stripe"

style="width: 100%"

tooltip-effect="dark"

border

@cell-dblclick="cellDblclick"

@row-click="rowClick"

@current-change="handleRowChange"

@selection-change="handleSelectionChange"

@sort-change="sortChange"

<el-table-column

v-if="hasselection"

:reserve-selection="reserveSelection"

type="selection"

header-align="center"

align="center"

width="40"

<el-table-column

v-if="hasindex && data.length > 0"

:index="indexMethod"

label="序号"

type="index"

header-align="center"

align="center"

class-name="rw-table-index"

width="80"

<el-table-column

v-for="h in heads"

:key="'col' + h.prop"

:prop="h.prop"

:fixed="h.hasFixed"

:align="h.align ? h.align : 'center'"

:header-align="h.hAlign ? h.hAlign : 'center'"

:min-width="h.minWidth ? h.minWidth : '128'"

:width="h.width ? h.width: 'auto'"

:sortable="h.sortable ? 'custom' : false"

:label-class-name="h.hasWrap ? 'hasWrap' : ''"

<el-tooltip

:content="h.label"

overflow

effect="dark"

placement="top-start"

</div>

</el-tooltip>

<span

style="margin-right:8px;"

<el-popover

placement="top-start"

width="250"

trigger="hover"

content="针对付费订单，使用截止时间来源于合同，可能和最终实施的使用截止日期存在差异。"

slot="reference"

class="tips-icon el-icon-question"

</el-popover>

</div>

</template>

<div

v-if="h.type === 'starIcon'"

class="star-icon-box">

v-for="(item, i) in 5"

:key="'icon' + i"

:style="{

color: scope.row[h.prop] > i ? '#F7BA2A' : '#DAE0E7',

:class="

scope.row[h.prop] > i

? 'iconxingxing-tianchong'

: 'iconxingxing'

class="iconfont star-icon"

</div>

<el-tooltip

popper-class="baseDataPopper"

effect="dark"

placement="bottom-start">

<div :style="scope.row[h.prop + 'Style']">{{ scope.row[h.prop] }}</div>

<div class="content-box">{{ scope.row[h.prop] }}</div>

</template>

</el-tooltip>

</template>

<div

class="similarText"

@click="goToSimilarDetail(scope.row)">{{ scope.row[h.prop] }}</div>

</template>

<div >{{ formatDate(new Date(scope.row[h.prop])) }}</div>

</template>

<div

v-else

:class="h.type == 'price' || h.type == 'percent'

? (scope.row[h.prop] == 0 || scope.row[h.prop] == null)

? 'zero'

: scope.row[h.prop] > 0

? 'up'

: 'down'

: ''

:style="scope.row[h.prop + 'Style']"

{{

scope.row[h.prop] === "" ? '' : (h.type == "price"

? toDecimal(scope.row[h.prop], 4)

: h.type == "percent"

? ( scope.row[h.prop] ? toDecimal(numMul(scope.row[h.prop], 100)) + '%' : '-')

: h.type == "date"

? scope.row[h.prop].split(' ')[0].replace(/\-/g, "")

: h.type == "deviation"? eventBiasClick(scope.row[h.prop]): scope.row[h.prop])

}}

</div>

</template>

</el-table-column>

</el-table>

</div>

<div

v-if="haspage"

class="table-pagination">

<el-pagination

:total="total"

:current-page="pageindex"

:page-size="pagesize"

background

layout="prev, pager, next, jumper"

@current-change="pageChange"

@size-change="pageSizeChange"

</div>

</template>

import { eventBiasHandle } from '@/utils/business'

import common from '@/utils/common'

export default {

props: {

heads: {

type: Array,

required: true

// 表格的数据

data: {

type: Array,

required: true

stripe: {

type: Boolean,

default: true

rowKey: {

type: String,

default: ''

emptydata: {

type: String,

default: ''

height: {

type: [Number, String],

default: 0

maxheight: {

type: [Number, String],

default: 0

total: {

type: Number,

default: 0

url: {

type: String,

default: ''

pagesize: {

type: Number,

default: 0

pageindex: {

type: Number,

default: 1

hasindex: {

type: Boolean,

default: false

hasselection: {

type: Boolean,

default: false

reserveSelection: {

type: Boolean,

default: false

haspage: {

type: Boolean,

default: true

highlightCurrentRow: {

// 是否有点击选中效果

type: Boolean,

default: false

size: {

type: String,

default: 'medium'

headbg: {

type: String,

default: ''

spanMethod: {

type: Function,

default: function({ row, column, rowIndex, columnIndex }) {}

// eslint-disable-next-line vue/require-default-prop

rowclassname: [String, Function],

treeProps: {

type: Object,

default: () => {

return { children: 'children', hasChildren: 'hasChildren' }

}

data() {

return {

emptyText: '暂无数据'

}

mounted() {

if (this.emptydata !== '') {

this.emptyText = this.emptydata

}

methods: {

goToSimilarDetail(row) {

this.$emit('goToSimilarDetail', row)

eventBiasClick(val) {

return eventBiasHandle(val)

pageChange(val) {

this.$emit('pageChange', this.pagesize, val)

pageSizeChange(val) {

if (val * (this.pageindex - 1) <= this.total) {

this.$emit('pageChange', val, this.pageindex)

} else {

this.$emit('pageChange', val, 1)

}

sortChange(column, prop, order) {

this.$emit('sortChange', column)

indexMethod(index) {

return this.pagesize * (this.pageindex - 1) + index + 1

handleSelectionChange(val) {

this.$emit('selection-change', val)

cellDblclick(row, column, cell, event) {

this.$emit('cell-dblclick', row, column, cell, event)

rowClick(row, column, event) {

this.$emit('rowClick', row, column, event)

clearSelection() {

this.$refs.table.clearSelection()

toggleAllSelection() {

this.$refs.table.toggleAllSelection()

toggleRowSelection(row) {

this.$refs.table.toggleRowSelection(row)

handleRowChange(row) {

if (this.highlightCurrentRow) {

this.$emit('handleCurRow', row)

}

doLayout() {

this.$refs.table.doLayout()

formatDate(date, format = 'YYYY-MM-dd') {

return common.formatDate(date, format)

}

</script>

.baseDataPopper {

.content-box {

max-width: 500px;

max-height: 400px;

overflow-y: auto;

white-space: pre-line;

}

</style>

.el-icon-question {

color: #1e81ff;

margin-right: 8px;

}

.similarText {

text-decoration: underline;

color: #1e81ff;

cursor: pointer;

}

.table-wrapper {

padding: 17px 0 20px;

.table-box {

padding: 0 16px;

}

.el-table {

/deep/thead {

tr,

th {

padding-top: 0;

padding-bottom: 0;

font-size: 14px;

color: #333333;

font-weight: normal;

background: #fcfcfc;

}

th {

.cell {

display: flex;

justify-content: center;

align-items: center;

line-height: 16px;

white-space: pre;

.dialog-box-title{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.hasWrap {

display: flex;

justify-content: center;

}

.caret-wrapper {

width: 14px;

.sort-caret {

left: 2px;

}

/deep/tr {

height: 44px !important;

td {

padding-top: 4px;

padding-bottom: 4px;

color: #666666;

font-size: 14px;

}

&.el-table__row--striped td {

background: #fcfcfc !important;

}

/deep/.el-table__body tr.current-row > td {

background-color: #eff4f9;

}

.star-icon-box {

.star-icon {

margin-right: 6px;

font-size: 14px;

&:nth-last-of-type(1) {

margin-right: 0;

}

/deep/.table-pagination {

margin-top: 20px;

padding-top: 20px;

text-align: center;

border-top: 1px solid #eeeff1;

.el-pagination.is-background .btn-next,

.el-pagination.is-background .btn-prev,

.el-pagination.is-background .el-pager li {

font-size: 12px;

font-weight: normal;

color: #666666;

background: #f6f6f6;

border-radius: 3px;

}

.el-pagination.is-background .el-pager li:not(.disabled).active {

color: #ffffff;

background-color: #1e81ff;

}

.el-pagination.is-background .btn-next.disabled,

.el-pagination.is-background .btn-next:disabled,

.el-pagination.is-background .btn-prev.disabled,

.el-pagination.is-background .btn-prev:disabled,

.el-pagination.is-background .el-pager li.disabled {

color: #c0c4cc;

}

.el-pagination__jump,

.el-input__inner {

font-size: 12px;

color: #666666;

}

.up {

color: #ed5959;

}

.down {

color: #33ad34;

}

.zero {

color: #333;

}

</style>

父组件详情页面代码：

<div>

<div

v-loading="loading"

class="main-wrapper">

<el-card class="box-card">

<div

v-for="(item, index) in tabList"

:key="index"

class="item-tab"

@click="handleClick(item, index)">

<div

:class="activeIndex === index ? 'color' : ''"

class="tab"

>{{ item }}</div>

<div

v-if="activeIndex === index"

class="line-box"/>

</div>

<ColumnTable

ref="columnTable"

:header-list="headerList"

:table-data="tableData"

:active-index="activeIndex"

@addRow ="addRow"

@delRow ="delRow"

</div>

</el-card>

</div>

<el-dialog

v-if="dialogVisible"

:visible.sync="dialogVisible"

title="选择事件"

width="60%"

class="dialog"

@close="cancelSelect">

<el-form

ref="ruleForm"

:model="ruleForm"

:rules="rules"

label-width="100px"

class="demo-ruleForm">

<el-form-item

label="事件"

prop="similarVal">

<el-select

v-model="ruleForm.similarVal"

:multiple-limit="2"

placeholder="请选择"

multiple

collapse-tags>

<el-option

v-for="item in similarOptions"

:key="`${getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁`"

:label="`${getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁`"

:value="`${getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁`"/>

</el-select>

</el-form-item>

<el-form-item class="btnOptions">

<el-button

@click="cancelSelect">取消</el-button>

<el-button

type="primary"

style="margin-left:20px"

@click="submitForm('ruleForm')">确定</el-button>

</el-form-item>

</el-form>

</el-dialog>

</div>

</template>

import ColumnTable from '@/components/ColumnTable' // 引入父组件表格

import { querySimilarTableData } from '@/api/queryEvent' // 后端接口

export default {

components: {

ColumnTable

data() {

return {

tabList: ['基本信息', '财务信息', '行情走势', '分类业务'],

activeIndex: 0,

headerList: [

{

label: '',

value: 'class',

headerAlign: 'left',

minWidth: '110',

align: 'center'

{

label: '基本信息',

value: 'baseInfo',

headerAlign: 'left',

minWidth: '80',

align: 'center'

{

label: '公司规模',

value: 'CirculatedMarketValue',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '公司性质',

value: 'OwnshipID',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '注册地址',

value: 'RegisterAddress',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '注册资本（元）',

value: 'RegisterCapital',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '办公地址',

value: 'OfficeAddress',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '上市日期',

value: 'IPODate',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '主营业务',

value: 'MainBusiness',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '所属行业',

value: 'IndustryCode',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '总股本（万股）',

value: 'TotalShare',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '流通股本（万股）',

value: 'CirculatedShare',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '财务信息',

value: 'financialInfo',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '净资产收益率（%）',

value: 'ROEA',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '净利润率（%）',

value: 'ROA2A',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '营业成本率（%）',

value: 'OperatingCostRatio',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '营业利润率（%）',

value: 'OperatingProfiToRevenue',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '销售期间费用率（%）',

value: 'PeriodExpenseRate',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '投资收益率（%）',

value: 'ReturnOnInvestment',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '应收账款周转率（%）',

value: 'ReceivableTurnoverA',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '总资产周转率（%）',

value: 'AssetTurnoverA',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '股东权益周转率（%）',

value: 'EequityTurnoverA',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '行情走势',

value: 'marketTrend',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '个股事后1日涨跌幅（%）',

value: 'onedayratio',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '个股事后3日涨跌幅（%）',

value: 'threedayratio',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '个股事后5日涨跌幅（%）',

value: 'fivedayratio',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '大盘收益率（%）',

value: 'marketreturn',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '行业收益率（%）',

value: 'industryreturn',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '分类业务',

value: 'age',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '解禁占比（%）',

value: 'Proportion2',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '总限售股数（万股）',

value: 'TotalLockShares',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '剩余限售股数量（万股）',

value: 'RemainedLockShares',

headerAlign: 'left',

minWidth: '90',

align: 'center'

{

label: '解禁股东数',

value: 'HolderNumber',

headerAlign: 'left',

minWidth: '90',

align: 'center'

}

ruleForm: {

similarVal: [] // 下拉框选中值

rules: {

similarVal: [

{ required: true, message: '请选择相似事件', trigger: 'change' }

]

tableData: [], // 表格数据

queryParams: [], // 请求参数

queryParams1: [], // 请求参数

loading: false, // 加载状态

dialogVisible: false, // 是否显示添加事件弹框

similarOptions: [] // 下拉框选项数据

}

mounted() {

let arr = []

arr = sessionStorage.getItem('similarParams')

this.queryParams = JSON.parse(arr)

this.queryParams.forEach(i => {

const tableList = sessionStorage.getItem('tableData')

this.similarOptions = JSON.parse(tableList).filter((item) => item.symbol !== i.symbol)

})

this.getSimilarTableData(this.queryParams)

methods: {

// tab栏切换点击（滚动条锚点定位）

handleClick(item, index) {

this.activeIndex = index

if (this.activeIndex == 0) {

document.documentElement.scrollTop = 0

} else {

// 获取需要滚动到的元素

const targetElement = document.getElementById('title')

// 将页面滚动至目标元素处

targetElement.scrollIntoView({ behavior: 'smooth' })

}

// 获取表格数据

getSimilarTableData(params) {

this.loading = true

this.tableData = []

querySimilarTableData(params).then(res => {

this.loading = false

res.forEach((item, index) => {

params.forEach((i, idx) => {

if (index === idx) {

const title = this.getDate(i.event_date)

item.RegisterCapital = this.money(item.RegisterCapital)

item.ROEA = this.toDecimal(item.ROEA, 4)

item.ROA2A = this.toDecimal(item.ROA2A, 4)

item.OperatingCostRatio = this.toDecimal(item.OperatingCostRatio, 4)

item.OperatingProfiToRevenue = this.toDecimal(item.OperatingProfiToRevenue, 4)

item.PeriodExpenseRate = this.toDecimal(item.PeriodExpenseRate, 4)

item.ReturnOnInvestment = this.toDecimal(item.ReturnOnInvestment, 4)

item.ReceivableTurnoverA = this.toDecimal(item.ReceivableTurnoverA, 4)

item.AssetTurnoverA = this.toDecimal(item.AssetTurnoverA, 4)

item.EequityTurnoverA = this.toDecimal(item.EequityTurnoverA, 4)

item.onedayratio = this.toDecimal(item.onedayratio, 2)

item.threedayratio = this.toDecimal(item.threedayratio, 2)

item.fivedayratio = this.toDecimal(item.fivedayratio, 2)

item.marketreturn = this.toDecimal(item.marketreturn, 2)

item.industryreturn = this.toDecimal(item.industryreturn, 2)

item.Proportion2 = this.toDecimal(item.Proportion2, 4)

const obj = {

...item

}

this.tableData.push(obj)

}

})

const obj1 = {

AssetTurnoverA: '', CirculatedMarketValue: '', CirculatedShare: null, EequityTurnoverA: '', HolderNumber: null, IPODate: '', IndustryCode: '', MainBusiness: '', OfficeAddress: '', OperatingCostRatio: '', OperatingProfiToRevenue: '', OwnshipID: '', PeriodExpenseRate: '', Proportion2: '', ROA2A: '', ROEA: '', ReceivableTurnoverA: '', RegisterAddress: '', RegisterCapital: '', RemainedLockShares: null, ReturnOnInvestment: '', Symbol: '', TotalLockShares: null, TotalShare: null, fivedayratio: '', industryreturn: '', marketreturn: '', onedayratio: '', threedayratio: ''

}

this.tableData.push(obj1)

})

// 格式化日期

getDate(date) {

const date1 = new Date(date)

// 获取年份、月份和日期

const year = date1.getFullYear()

const month = date1.getMonth() + 1 // 注意月份从0开始计数，所以需要加上1得到真正的月份（12）

const day = date1.getDate()

return `${year}年${month}月${day}日`

// 新增事件

addRow() {

this.ruleForm.similarVal = []

this.tableData.forEach(res => {

this.similarOptions.forEach(i => {

if (res.class === `${this.getDate(i.eventdate.substring(0, 10))}${i.symbol}${i.shortname}解禁`) {

this.ruleForm.similarVal.push(res.class)

}

})

this.dialogVisible = true

// 删除事件

delRow(label) {

const index = this.tableData.findIndex(item => item.class === label)

const selectItem = this.tableData.splice(index, 1)

const arr = this.ruleForm.similarVal.filter(i => i !== selectItem[0].class)

this.ruleForm.similarVal = arr

// 取消选择事件

cancelSelect() {

this.dialogVisible = false

// 点击确定添加事件

submitForm(formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

this.queryParams1 = []

let queryParams2 = []

let tableParams = []

this.ruleForm.similarVal.forEach(i => {

queryParams2 = this.similarOptions.filter((item) => `${this.getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁` === i)

queryParams2.forEach(item => {

const obj = {

event_date: item.eventdate.substring(0, 10),

event_type: Number(item.eventtype),

shortname: item.shortname,

symbol: item.symbol

}

this.queryParams1.push(obj)

tableParams = this.queryParams.concat(this.queryParams1)

})

this.getSimilarTableData(tableParams)

this.dialogVisible = false

} else {

console.log('error submit!!')

return false

}

})

}

</script>

/deep/ .el-select {

width: 320px !important;

}

/deep/ .el-select > .el-input {

width: 350px;

}

/deep/ .el-dialog {

height: 50%;

position: relative;

}

/deep/ .el-dialog__footer {

position: absolute;

bottom: 20px;

right: 20px;

}

.select-title {

margin-left: 100px;

}

.main-wrapper {

margin: 77px auto 0;

max-width: 1200px;

box-sizing: border-box;

.main-box {

display: flex;

.box-card {

width: 100%;

.title {

font-size: 14px;

font-family: Noto Sans S Chinese;

font-weight: bold;

color: #333333;

}

.tab-box {

display: flex;

align-items: center;

margin: 35px 57px 37px 57px;

.item-tab {

margin-right: 36px;

width: 67px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

cursor: pointer;

position: relative;

.tab {

font-size: 14px;

font-family: Noto Sans S Chinese;

font-weight: 400;

color: #333333;

}

.color {

color: #1E81FF;

}

.line-box {

width: 67px;

height: 1px;

background: #1E81FF;

position: absolute;

content: "";

bottom: -3px;

left: 0;

}

.table {

margin: 33px 57px 56px;

}

.btnOptions {

position: absolute;

right: 20px;

bottom: 20px;

}

</style>

加减表格子组件代码：

<el-table

ref="table"

:data="getTableData[0]"

border

style="width: 100%;"

<el-table-column

:key="index"

:label="item.label"

:prop="item.value"

:header-align="item.headerAlign || 'center'"

:min-width="item.minWidth || 80"

:align="item.align || 'center'"

<div

:class="(scope.$index === 0 && activeIndex == 0) || (scope.$index === 11 && activeIndex == 1) || (scope.$index === 21 && activeIndex == 2) || (scope.$index === 27 && activeIndex == 3) ? 'title-text' : ''"

:style="{textAlign: (scope.$index === 4 || scope.$index > 8) && index > 0 ? 'right' : (index === 0 ? 'center' : 'left')}"

:id="(scope.$index === 0 && activeIndex == 0) || (scope.$index === 11 && activeIndex == 1) || (scope.$index === 21 && activeIndex == 2) || (scope.$index === 27 && activeIndex == 3) ? 'title' : ''">

</div>

</template>

<template

slot="header"

slot-scope="scope">

<div

v-if="scope.$index == tableData.length"

class="ceil">

class="el-icon-circle-plus-outline"

@click="addRow()" />

</div>

<div

v-else-if="scope.$index>2&&scope.$index<tableData.length"

class="ceil">

class="el-icon-remove-outline"

@click="delRow(scope.column.label)"/>

</div>

<span v-else>{{ scope.column.label }}</span>

</template>

</el-table-column>

</template>

</el-table>

</template>

export default {

props: {

headerList: {

type: Array,

default: () => []

tableData: {

type: Array,

default: () => []

activeIndex: {

type: Number,

default: 0

}

data() {

return {

}

computed: {

getTableData() {

return this.fotmatterTableData(this.tableData, this.headerList)

}

methods: {

fotmatterTableData(data, header) {

const enddata = []

const endheader = []

header.forEach((item, index) => {

if (index === 0) {

endheader.push({

label: header[index].label,

value: 'mainIndex',

headerAlign: header[index].headerAlign,

minWidth: header[index].minWidth,

align: header[index].align

})

data.forEach((ele, idx) => {

endheader.push({

label: ele[header[index].value],

value: `type${idx}`

})

} else {

const obj = {

mainIndex: header[index].label

}

data.forEach((ele, ind) => {

obj[`type${ind}`] = ele[header[index].value]

})

enddata.push(obj)

}

})

console.log('end===', enddata, endheader)

return [enddata, endheader]

// 列表格式化

tableFormatter(prop, row) {

if (row[prop] || row[prop] == 0) {

if (prop === 'mainIndex') {

if (row.unit) {

return `${row[prop]}（${row.unit}）`

}

return row[prop]

}

return row[prop]

}

return ''

randomStr() {

return Math.random().toString().slice(3, 8)

addRow() {

this.$emit('addRow')

delRow(label) {

this.$emit('delRow', label)

}

</script>

.title-text {

background: rgba(30,129,255,0.1);

color: #1E81FF;

width: 100%;

height: 24px;

}

/deep/ .el-table th > .cell {

padding-left: 0 !important;

padding-right: 0 !important;

}

/deep/ .cell {

padding-left: 0 !important;

padding-right: 0 !important;

height: 100%;

}

/deep/ td {

padding: 0;

}

.el-icon-circle-plus-outline {

cursor: pointer;

color: #1E81FF;

font-size: 16px;

}

.el-icon-remove-outline {

cursor: pointer;

color: #707070;

font-size: 16px;

}

</style>

Mirs_Zhu

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
element ui 表格与锚点定位

queryParams2 = this.similarOptions.filter((item) => `${this.getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁` === i)if (res.class === `${this.getDate(i.eventdate.substring(0, 10))}${i.symbol}${i.shortname}解禁`) {
复制链接

扫一扫