vue+element-ui表格中实现树状表格。并且插入下拉框项

vue+element-ui表格中实现树状表格可以进行多选。并且插入下拉框项

• 在开发中遇到一个需求是表格中的数据要以复选框树状的形式来展示，并且表格的某一列表头嵌套下拉框，下拉框中可以任意选数据，点击多选框进行多选保存
  
• 如图每一行数据可以进行对版本的一个下拉选择，并且进行勾选保存，html代码如下：
  （小菜鸡一枚，大家多多指教！欢迎大家指出问题~~~~）

  <el-table ref="table"
                  :data="tableData"
                  style="width: 100%;margin-bottom: 20px;"
                  row-key="id"
                  border
                  :indent="50"
                  :header-cell-style="{background:'#F2F2F2'}"
                  :select-on-indeterminate="false"
                  @select="select"
                  @select-all="selectAll"
                  @selection-change="selectionChange"
                  default-expand-all
                  :tree-props="{children: 'childList'}">
          <el-table-column type="selection"
                           :selectable='selectInit'
                           width="55">
          </el-table-column>
          <el-table-column prop="date"
                           label="日期"
                           sortable
                           width="180">
          </el-table-column>
          <el-table-column label="版本号"
                           width="">
            <template slot-scope="scope">
              <el-select v-model="scope.row.version"
                         @change="change(scope.$index,scope.row)">
                <el-option v-for="item in roleData"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"></el-option>
              </el-select>

            </template>
          </el-table-column>

          <el-table-column prop="address"
                           label="地址">
          </el-table-column>
        </el-table>

js代码：

export default {
  data () {
    return {
      checkPageAll: false,
      tableData: [{
        id: 1,
        date: '2016-05-01',
        address: '上海市普陀区金沙江路1弄'
      }, {
        id: 2,
        date: '2016-05-02',

        address: '上海市普陀区金沙江路 2 弄'
      }, {
        id: 3,
        date: '2016-05-03',

        address: '上海市普陀区金沙江路 3 弄',
        childList: [{
          id: 31,
          date: '2016-05-31',

          address: '上海市普陀区金沙江路 4 弄'
        }, {
          id: 32,
          date: '2016-05-32',

          address: '上海市普陀区金沙江路 5 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-04',

        address: '上海市普陀区金沙江路 6 弄'
      }],
      selectArr: [],
      roleData: []
    };
  },
  methods: {
    change (index, row) {
      console.log(index, row)
    //设置多选框某些项不可多选
    selectInit (row) {
      // console.log(index)
      if (row.id == 3) {
        return false  //不可勾选
      } else {
        return true  //可勾选
      }
    },
    select (selection, row) {
      if (selection.some(el => { return row.id === el.id })) {
        if (row.childList) {
          row.childList.map(j => {
            this.toggleSelection(j, true)
          })
        }
      } else {
        if (row.childList) {
          row.childList.map(j => {
            this.toggleSelection(j, false)
          })
        }
      }
    },
    selectAll (selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const tableDataIds = this.tableData.map(j => j.id)
        return tableDataIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map(el => {
          if (el.childList) {
            el.childList.map(j => {
              this.toggleSelection(j, true)
            })
          }
        })
      }
      if (isCancel) {
        this.tableData.map(el => {
          if (el.childList) {
            el.childList.map(j => {
              this.toggleSelection(j, false)
            })
          }
        })
      }
    },
    selectionChange (selection) {
      this.selectArr = selection
      console.log(this.selectArr, '0909')
    },
    toggleSelection (row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
        })
      }
    },
  }
};