问题
I've got a page where is presented single article along with part where u can see info abou loan, based on articles price.
Now I've created bootstrap table, mapped through data, displayed them and everything is fine.
But problem that I got: I want to display additional data under bank name. Now when I do that, other three td won't change their height to stay in same line as first one.
Here is screenshot where everything is ok:
Now when I add two more things under bank:
Now what I was expecting is that, these three right rows shift automatically down, and follow bank(auto adjust height to be same as height of columns in first row). So basically I was expecting result like this:
Is there some way of fixing this?
Here is my Article.js component:
import React, { useEffect, useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import Form from 'react-validation/build/form';
import Input from 'react-validation/build/input';
import CheckButton from 'react-validation/build/button';
import ArticleService from '../services/article.service';
const Article = (props) => {
const form = useRef();
const checkBtn = useRef();
const [content, setContent] = useState([]);
const [dataArr, setDataArr] = useState([]);
const [months, setMonths] = useState([]);
const [loading, setLoading] = useState(false);
const onChangeMonths = (e) => {
const months = e.target.value;
setMonths(months);
};
const handleMonths = async (e) => {
e.preventDefault();
setLoading(true);
if (checkBtn.current.context._errors.length === 0) {
const id = props.match.params.id;
try {
const res = await ArticleService.article(id, months);
setContent(res.data);
const data = res.data.kredit;
const dataArr = [];
dataArr.push({
name: 'kreditNKS-rataNKS',
price: data.kreditNKS.map((item) => {
return item;
}),
rate: data.rataNKS.map((item) => {
return item;
}),
nks: data.stopaNKS.map((item) => {
return item;
}),
banka: {
eks: data.stopaEKS.map((item) => {
return item;
}),
bankname: data.ime.map((item) => {
return item;
}),
type: data.tip.map((item) => {
return item;
}),
},
});
setDataArr(dataArr);
setLoading(false);
} catch (e) {
setLoading(false);
}
} else {
setLoading(false);
}
};
useEffect(() => {
const fetchPosts = async () => {
const id = props.match.params.id;
const res = await ArticleService.article(id);
setContent(res.data);
const data = res.data.kredit;
const dataArr = [];
dataArr.push({
name: 'kreditNKS-rataNKS',
price: data.kreditNKS.map((item) => {
return item;
}),
rate: data.rataNKS.map((item) => {
return item;
}),
nks: data.stopaNKS.map((item) => {
return item;
}),
banka: {
eks: data.stopaEKS.map((item) => {
return item;
}),
bankname: data.ime.map((item) => {
return item;
}),
type: data.tip.map((item) => {
return item;
}),
},
});
setDataArr(dataArr);
};
fetchPosts();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const a = dataArr;
const render = (item, index) => {
return (
<tr key={index}>
<td>
{item.banka.bankname.map((it, index2) => (
<h4>
{it}
<br></br> //from here
EKS: {item.banka.eks[index2]} when i add this part, height dont change
<br></br>
Tip: {item.banka.type[index2]} //to here
</h4>
))}
</td>
<td>
{item.nks.map((it) => (
<h4>{it}</h4>
))}
</td>
<td>
{item.price.map((it) => (
<h4>{it}</h4>
))}
</td>
<td>
{item.rate.map((it3) => (
<h4>{it3}</h4>
))}
</td>
</tr>
);
};
return (
<div>
<p className='text-dark'>
<Link to='/dashboard'>
<i className='fas fa-arrow-left'></i> Nazad
</Link>
</p>
<div className='container p-3 my-3 bg-dark text-white'>
<strong>Artikal id:{content.id}</strong>
<br></br>
<br></br>
<div className='row'>
<div className='col-sm'>
Opis:
<br></br>
{content.descr}
</div>
<div className='col-sm'>
Cijena
<br></br>
{content.price}
</div>
<div className='col-sm'>
Cijena po metru kvadratnom:
<br></br>
{content.ppm2}/m2
</div>
</div>
</div>
<div className='container'>
<h3>KREDITI ZA CIJENU {content.price}</h3>
<Form onSubmit={handleMonths} ref={form}>
<div className='form-group'>
<label>Vrijeme otplate u mjesecima:</label>
<Input
type='text'
className='form-control w-25'
name='months'
value={months}
onChange={onChangeMonths}
/>
<button
className='btn btn-primary btn-block w-25'
disabled={loading}
>
{loading && (
<span className='spinner-border spinner-border-sm'></span>
)}
<span>Prikaži</span>
</button>
<CheckButton style={{ display: 'none' }} ref={checkBtn} />
<small>
Ako se ne unese vrijeme otplate kredita, kredit se izračunava za
60 mjeseci
</small>
</div>
</Form>
</div>
<div className='table-responsive'>
<table className='table'>
<thead className='thead-dark'>
<tr>
<th scope='col'>Informacije o banci</th>
<th scope='col'>NKS</th>
<th scope='col'>Ukupna cijena kredita</th>
<th scope='col'>Mjesečna rata kredita</th>
</tr>
</thead>
<tbody>{a.map(render)}</tbody>
</table>
</div>
</div>
);
};
export default Article;
EDIT:
Also this is how my a look where I'm mapping for data:
回答1:
Try displaying the table data like this:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
var a = [
{ info: ['Ziraat', 'EKS', 'Tip'], nks: '4.11', total: '360090.95 KM', rata: '60001.52 KM/mi' },
{ info: ['Ziraat', 'EKS', 'Tip'], nks: '3.94', total: '358594.45 KM', rata: '60001.52 KM/mi' },
{ info: ['UniCredit', 'EKS', 'Tip'], nks: '7', total: '386123.37 KM', rata: '60001.52 KM/mi' }
];
const Dashboard = () => {
return (
<table class="table text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Info</th>
<th scope="col">NKS</th>
<th scope="col">Total</th>
<th scope="col">Rata</th>
</tr>
</thead>
<tbody>
{a && a.map((item) => (
<tr key={item.id}>
<td className="d-flex flex-column align-items-center">
{item.info && item.info.map((index) => (
<span>{index}</span>
))}
</td>
<td className="align-middle">{item.nks}</td>
<td className="align-middle">{item.total}</td>
<td className="align-middle">{item.rata}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Dashboard;
The above code results in the below output:
Updated Code: For the a object that you provided.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
var a = [
{ bankname: ['ZiraatBank', 'ZiraatBank', 'UniCreditBank'], eks: ['6.24', '5.65', '8.26'],
name: 'kreditNKS-rataNKS', nks: ['4.11', '3.94', '7'], price: [107473.32, 107026.62, 115242.94],
rate: [1791.22, 1783.78, 1920.72], type: ['Fiksna', 'Promjenjiva', 'Fiksna'] },
];
const Dashboard = () => {
return (
<table class="table text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Info</th>
<th scope="col">NKS</th>
<th scope="col">Total</th>
<th scope="col">Rata</th>
</tr>
</thead>
<tbody>
{a[0].bankname && a[0].bankname.map((item, i) => (
<tr>
<td className="d-flex flex-column align-items-center">
<span>{item}</span>
<span>EKS: {a[0].eks[i]}</span>
<span>Tip: {a[0].type[i]}</span>
</td>
<td className="align-middle">{a[0].nks[i]}</td>
<td className="align-middle">{a[0].price[i]}</td>
<td className="align-middle">{a[0].rate[i]}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Dashboard;
Output for this new code:
来源：https://stackoverflow.com/questions/65919896/why-inside-my-bootstrap-table-td-wont-change-height-based-on-other-td