umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题

展开行

          <template>
           <el-button @click="$refs.plTable.toggleRowExpand(tableData[1])">切换第二行展开</el-button>
           <el-button @click="$refs.plTable.setRowExpand([tableData[2], tableData[3]], true)">设置第三、四行展开</el-button>
           <el-button @click="$refs.plTable.setAllRowExpand(true)">设置所有行展开</el-button>
           <el-button @click="$refs.plTable.clearRowExpand()">关闭所有行展开</el-button>
       <ux-grid ref="plTable"
               border
               height="500"
               :data="tableData"
               :expand-config="{labelField: 'name', expandAll: false}"
               @expand-change="toggleExpandChangeEvent">
           <ux-table-column type="index" width="60"></ux-table-column>
           <ux-table-column type="expand" title="姓名" width="120">
               <template v-slot:content="{ row, rowIndex }">
                   <template>
                               <span>Name：</span>
                               <span>{{ row.name }}</span>
                               <span>Name：</span>
                               <span>{{ row.age }}</span>
                   </template>
               </template>
           </ux-table-column>
           <ux-table-column field="sex" title="性别"></ux-table-column>
           <ux-table-column field="age" title="年龄"></ux-table-column>
       </ux-grid>
</template>
          export default {
        name: "expandRow",
        data () {
          return {
              tableData: []
        mounted () {
            setTimeout(() => {
                this.tableData = Array.from({ length: 100 }, (_, idx) => ({
                    id: idx + 1,
                    name: 'umy' + idx,
                    sex: idx,
                    age: '欢迎使用umy' + idx
        methods: {
            toggleExpandChangeEvent ({ row, expanded }) {
                console.log('行展开事件' + expanded)