在實(shí)際需求中我們經(jīng)常遇到各種奇葩的需求，不足為奇。每個(gè)項(xiàng)目的需求各不相同，實(shí)現(xiàn)功能的思路大致是一樣的。

本文來(lái)具體介紹怎么實(shí)現(xiàn)table表格動(dòng)態(tài)插入幾列。

首先實(shí)現(xiàn)思路有2種，

1. 插入的位置如果是已知的，我知道在哪個(gè)標(biāo)題的后面插入這就好辦了。

?上圖可以看出就是在地址和備注2列之間插入數(shù)據(jù)，那就好辦了。直接在地址后面寫(xiě)一個(gè)

<el-table-column
            width="160"
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
          >
          </el-table-column>

通過(guò) for 循環(huán) 數(shù)組動(dòng)態(tài)遍歷出來(lái)就可以實(shí)現(xiàn)功能了。

        <el-table :data="tableData" border>
          <el-table-column type="index" label="序號(hào)" width="120"></el-table-column>
          <el-table-column prop="date" label="日期" width="120"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="phone" label="電話" width="120"></el-table-column>
          <el-table-column prop="email" label="郵箱" width="120"></el-table-column>
          <el-table-column prop="address" label="地址" width="120"></el-table-column>
          <el-table-column
            width="160"
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
          >
          </el-table-column>
          <el-table-column prop="des" label="備注" width="120"></el-table-column>
        </el-table>

    return {
      tableData: [],
      tableColumns: [
        {
          prop: "1001",
          label: "1001"
        },        
        {
          prop: "1002",
          label: "1002"
        },
        {
          prop: "1003",
          label: "1003"
        }
      ],

    }

?2. 也可以這樣寫(xiě)，列全部用數(shù)組動(dòng)態(tài)顯示出來(lái)，每列的順序就看數(shù)組里面怎么排序給你返回了。

 <el-table :data="tableData" border>
         <el-table-column type="index" label="序號(hào)" width="120"></el-table-column>
         <el-table-column
            width="160"
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
          >
          </el-table-column>
</el-table>

    return {
      tableData: [],
      tableColumns: [
        {
          prop: "date",
          label: "日期"
        },
        {
          prop: "name",
          label: "姓名"
        }, 
        {
          prop: "phone",
          label: "電話"
        },
        {
          prop: "email",
          label: "郵箱"
        }, 
        {
          prop: "address",
          label: "地址"
        }, 
        {
          prop: "1001",
          label: "1001"
        },        
        {
          prop: "1002",
          label: "1002"
        },
        {
          prop: "1003",
          label: "1003"
        },
        {
          prop: "des",
          label: "備注"
        }
      ],
}

3. 還有1種情況，就是不知道插入的順序在哪，隨機(jī)動(dòng)態(tài)的，實(shí)現(xiàn)方法同方法2一樣，但是 全部列的數(shù)組是由后端返回給你的，后端自己控制每列的排序。

今天就到這了。。。。。。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-564353.html

到了這里，關(guān)于el-ment ui 表格組件table實(shí)現(xiàn)列的動(dòng)態(tài)插入功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！