Element ui 里面 Table 通过点击操作按钮实现展开行功能vue3

呆萌小菜鸟

于 2024-08-29 18:03:19 发布

阅读量52

点赞数 1

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/m0_59893114/article/details/141685074

版权

补充下 vue3 的吧，直接代码，样式忽略

      <div class="table-container">
        <el-table
          :data="tableData"
          border
          ref="table"
        >
          <el-table-column
            label="商品 ID"
            prop="id"
          >
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="name"
          >
          </el-table-column>
          <el-table-column
            label="描述"
            prop="desc"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
          >
            <template #default="scoped">
              <el-button
                type="text"
                @click="toogleExpand(scoped.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
          <el-table-column
            type="expand"
            width="1"
          >
            <template #default="props">
              <el-form
                label-position="left"
                inline
                class="demo-table-expand"
              >
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
      </div>

const tableData = ref<any[]>([{
  id: '12987122',
  name: '好滋好味鸡蛋仔',
  category: '江浙小吃、小吃零食',
  desc: '荷兰优质淡奶，奶香浓而不腻',
  address: '上海市普陀区真北路',
  shop: '王小虎夫妻店',
  shopId: '10333'
},
{
  id: '12987123',
  name: '好滋好味鸡蛋仔',
  category: '江浙小吃、小吃零食',
  desc: '荷兰优质淡奶，奶香浓而不腻',
  address: '上海市普陀区真北路',
  shop: '王小虎夫妻店',
  shopId: '10333'
}, {
  id: '12987125',
  name: '好滋好味鸡蛋仔',
  category: '江浙小吃、小吃零食',
  desc: '荷兰优质淡奶，奶香浓而不腻',
  address: '上海市普陀区真北路',
  shop: '王小虎夫妻店',
  shopId: '10333'
}, {
  id: '12987126',
  name: '好滋好味鸡蛋仔',
  category: '江浙小吃、小吃零食',
  desc: '荷兰优质淡奶，奶香浓而不腻',
  address: '上海市普陀区真北路',
  shop: '王小虎夫妻店',
  shopId: '10333'
}] as any)

const table = ref()
const toogleExpand = (row) => {
  tableData.value.map((item) => {
    if (row.id != item.id) {
      table.value.toggleRowExpansion(item, false)
    }
  })
  table.value.toggleRowExpansion(row)
}