prefacio
Recientemente, estoy aprendiendo el marco react-antd. La tabla se usa con mucha frecuencia en el proyecto. Estoy aprendiendo esta parte recientemente, así que anótela.
Datos de solicitud del formulario básico
Generalmente, solicitaremos los datos en la tabla y almacenaremos los datos solicitados en la tabla para mostrarlos.
Cuando solicitemos menos, podemos escribirlo así:
const [data, setData] = useState()
useEffect(() => {
const getData = async () => {
const {
data } = await axios.get('http://localhost:3001/user')
console.log(data)
const {
user } = {
...data }
setData(user)
}
getData()
}, [])
Si hay varias solicitudes en la función useEffect y es necesario escribir muchas solicitudes asíncronas/en espera, se requiere el siguiente método de escritura:
useEffect(async() => {
const getData = () => {
return axios.get('http://localhost:3001/user')
}
const getData2 = () => {
return axios.get('http://localhost:3001/user')
}
let a = await getData()
let a2 = await getData2()
console.log(a)
console.log(a2)
})
Luego defina los datos de encabezado de la tabla:
const colums = [
{
title: 'id',
dataIndex: 'id'
},
{
title: '姓名',
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '性别',
dataIndex: 'isMale',
render(isMale) {
return isMale === true ? '男' : '女'
}
},
{
title: '地址',
dataIndex: 'address'
},
{
title: '手机号',
dataIndex: 'phone'
}
]
Finalmente, represente la tabla:
dataSource es la fuente de datos y las columnas son el contenido del encabezado de la tabla
return (
<div>
<Card title='基础表格'>
<Table dataSource={
data} columns={
colums} />
</Card>
</div>
)
Compruebe el efecto: (Los datos de la tabla son puramente ficticios, si hay alguna similitud, no se pretende ofender)
tabla con función de borrado
Si desea agregar la función de eliminación de filas a la tabla, ¿cómo lograrlo?
En primer lugar, debemos agregar una nueva columna en los datos de la columna de encabezado, que es una operación, que es un botón:
devolver un botón directamente a través del procesamiento y agregar un evento de clic para eliminarlo.
const columns = [
{
id: 'ID',
dataIndex: 'key'
},
{
title: '姓名',
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '地址',
dataIndex: 'address'
},
{
title: '操作',
key: 'operaion',
render: (row, record) => {
return <Button onClick={
() => removeItem(row, record.key)}>删除</Button>
}
}
]
Eliminar evento:
haga clic en el botón y configuramos una ventana emergente Modal para confirmación secundaria. El onOk en ella es el contenido activado por la eliminación de confirmación secundaria. Aquí hacemos una eliminación simulada. Por supuesto, el desarrollo real es realizar eliminación de backend de solicitud de api.
const removeItem = (row, key) => {
console.log(row, key)
Modal.confirm({
title: '删除内容',
content: `你忍心删除${
row.name}吗？`,
onOk: () => {
setState(state.filter(item => item.key !== key))
message.success('删除成功!')
}
})
}
Hemos pasado la fila y los datos clave aquí, y veamos qué se imprime: podemos
obtener los datos de la fila actual y el número de fila, lo cual es conveniente para la operación de eliminación anterior.
Finalmente, la tabla se representa:
const [state, setState] = useState(data)
return (
<div >
<Card>
<Table
dataSource={
state}
columns={
columns}
bordered />
</Card>
</div>
)
Comprueba el efecto:
establecer la barra de ancho o alto
Puede usar scroll={ {x: 1200}} en la etiqueta de la tabla para establecer el ancho horizontal y luego hacer coincidir el ancho del div exterior para lograr barras horizontales, y lo mismo es cierto para vertical
return (
<div style={
{
'width': '1000px'}}>
<Card>
<Table
dataSource={
state}
columns={
columns}
scroll={
{
x: 1200}}
bordered />
</Card>
</div>
)
Echa un vistazo al efecto:
finalmente
Resumió el uso de algunas tablas, cómo solicitar datos, cómo configurar botones para eliminar datos, etc. Si tiene algún suplemento o pregunta, puede discutirlos en el área de comentarios ~
Si le es útil, puede hacer clic en Me gusta, sigue y apoya~