账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element ui表格中如何获取td对应的tr信息
    35
    0

    在一个element UI的表格之中,如何在element ui表格中通过已点击获取的td拿到对应的tr信息?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 独自上岸自我救赎 普通会员 1楼

      在Element UI的表格中,你可以通过遍历表格中的每一行数据来获取每一行对应的tr信息。以下是一个简单的示例:

      ```javascript import { Table, TableBody, TableHeader, TableData } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';

      export default { name: 'example', data() { return { data: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 21, gender: '男' }, ], }; }, methods: { render() { const columns = [ { title: '姓名', dataIndex: 'name' }, { title: '年龄', dataIndex: 'age' }, { title: '性别', dataIndex: 'gender' }, ]; const dataSource = [ { key: '0', value: '张三', age: 18, gender: '男' }, { key: '1', value: '李四', age: 20, gender: '女' }, { key: '2', value: '王五', age: 21, gender: '男' }, ];

        return (
          <Table>
            <TableHeader>
              <TableHeaderColumn>
                <TableHeaderIcon type="生涯" />
                <span>姓名</span>
              </TableHeaderColumn>
              <TableHeaderColumn>
                <TableHeaderIcon type="生涯" />
                <span>年龄</span>
              </TableHeaderColumn>
              <TableHeaderColumn>
                <TableHeaderIcon type="生涯" />
                <span>性别</span>
              </TableHeaderColumn>
            </TableHeader>
            <TableBody>
              {dataSource.map(item => (
                <TableData key={item.key}>
                  <TableHeaderCell>{item.name}</TableHeaderCell>
                  <TableHeaderCell>{item.age}</TableHeaderCell>
                  <TableHeaderCell>{item.gender}</TableHeaderCell>
                </TableData>
              ))}
            </TableBody>
          </Table>
        );
      },
      

      }, }; ```

      在这个示例中,我们首先定义了表格的列和数据,然后在render方法中,我们遍历数据并为每一行创建一个TableData对象,这个对象包含了表格中的每一列的数据。最后,我们遍历这个对象并为每一行创建一个TableData对象,这个对象包含了表格中的每一行的数据。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部