elementPlus动态表格获取行和列

没褶的叉烧包

已于 2024-12-19 09:31:05 修改

阅读量1k

点赞数 8

文章标签： javascript 前端 vue.js elementui

于 2024-12-17 09:42:34 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59685694/article/details/144524216

版权

废话不多说，直接上代码，可直接拿去使用。

<el-table
  ref="dataTableRef"
  :data="tables"
  border
>
    <el-table-column type="selection" width="45px"></el-table-column>
    <el-table-column label="序号" width="60px" type="index"></el-table-column>
    <el-table-column :prop="item.dataProp" :label="item.dataLabel" v-for="(item,index) in formThead" :key="index" align="center">
        <template #default="{row, $index}">
          <div v-if="row[item.dataProp]" @click="handleDetail(row,$index,index)">
            {{row[item.dataProp]}}
          </div>
          <div class="" v-else>
            <el-button type="success" circle plain @click.stop="addGoodsVisit(row,$index,index)">新增</el-button>
          </div>
        </template>
    </el-table-column>
</el-table>
const formThead = ref([
  { dataProp: 'xiaoxue', dataLabel: '小学' },
  { dataProp: 'chuzhong', dataLabel: '初中' },
  { dataProp: 'gaozhong', dataLabel: '高中' },
  { dataProp: 'daxue', dataLabel: '大学' },
  { dataProp: 'yanjiusheng', dataLabel: '研究生' },
])
const tables = ref([
  {
    xiaoxue: '小学1',
    chuzhong: '初中1',
    gaozhong: '高中1',
    daxue: '大学1',
    yanjiusheng: '研究生1',
  },
  {
    xiaoxue: '小学2',
    chuzhong: '初中2',
    gaozhong: '高中2',
    daxue: '大学2',
    yanjiusheng: '',
  },
])
function handleDetail(row,index,i){
    console.log(row,index,i)  // 获取列表行和列
}

function addGoodsVisit(row,index,i){
    console.log(row,index,i)  // 获取列表行和列
}