vue2.6 jsx语法怎么获取slot-scope中得值？

Z时代
2024-02-11
分类：IT

     {tableOptions && tableOptions.length > 0 ? (
        tableOptions.map((item) => {
          return (
            <el-table-column
              label={item.label}
              prop={item.prop}
              min-width={item.minWidth}
              width={item.width}
              type={item.type}
              align={item.align || 'center'}
            >
              <template slot-scope={row}>
                {item.slot
                  ? this.$scopedSlots[item.slotName]({
                      getCurRow: row,
                    })
                  : ''}
              </template>
            </el-table-column>
          );
        })

我想获取el-table-column slot-scope中得row，需要怎么写呢

回答：

      tableOptions.map((item) => {
          return (
            <el-table-column
              label={item.label}
              prop={item.prop}
              min-width={item.minWidth}
              width={item.width}
              type={item.type}
              align={item.align || 'center'}
              formatter={(row, column, cellValue, index) => {
                return item.slot
                  ? this.$scopedSlots[item.slotName]({
                      row: row,
                    })
                  : cellValue;
              }}
            ></el-table-column>
          );
        })

el-table-column 标签提供了formatter方法，可以使得嵌套得slot获取到row值

回答：

jsx 文档地址：https://github.com/vuejs/jsx-...
示例代码，放入你的系统应该可以直接运行

export default {
  name: 'table-demo',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      tableOptions: [
        {
          prop: 'date',
          label: '日期',
        },
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'address',
          label: '地址',
          slot: ({ row }) => {
            return <el-button>{row.address}</el-button>;
          },
        },
      ],
    };
  },
  render() {
    return (
      <div>
        <h1>el-table</h1>
        <el-table data={this.tableData} style={{ width: '100%' }}>
          {this.tableOptions.map((column) => {
            const scopedSlots = column.slot
              ? {
                  default: column.slot,
                }
              : null;
            return (
              <el-table-column
                prop={column.prop}
                label={column.label}
                scopedSlots={scopedSlots}
              ></el-table-column>
            );
          })}
        </el-table>
      </div>
    );
  },};