Как разделить ячейку, чтобы она соответствовала моим данным таблицы, используя элемент UI и vue? - PullRequest
Новая
       8

Как разделить ячейку, чтобы она соответствовала моим данным таблицы, используя элемент UI и vue?

0 голосов
/ 30 ноября 2018

Я использую element и vuejs для рендеринга данных в таблицу, мне нужно объединить ячейки, и я не могу изменить структуру данных.

Мои данные выглядят так: 

data = [{
    id: 1,
    name: "online_hi_comed"
    start_time: "2018-11-27 00:00:00",
    status: 0,
    infos: [{
        type: "32",
        item_id: "dsfdfs",
        id: 33,
        msg: "hello",
        img_url: "http://sdfsdfsf.png"
    }, {
        type: "32",
        item_id: "dsfdfs",
        id: 33,
        msg: "hello",
        img_url: "http://sdfsdfsf.png"
    }, {
        type: "32",
        item_id: "dsfdfs",
        id: 33,
        msg: "hello",
        img_url: "http://sdfsdfsf.png"
    }]

}, {
    id: 1,
    name: "online_hi_comed"
    start_time: "2018-11-27 00:00:00",
    status: 0,
    infos: [{
        type: "32",
        item_id: "dsfdfs",
        id: 33,
        msg: "hello",
        img_url: "http://sdfsdfsf.png"
    }, {
        type: "32",
        item_id: "dsfdfs",
        id: 33,
        msg: "hello",
        img_url: "http://sdfsdfsf.png"
    }, {
        type: "32",
        item_id: "dsfdfs",
        id: 33,
        msg: "hello",
        img_url: "http://sdfsdfsf.png"
    }]

}]

LookingПерейдите к результатам таблицы следующим образом:

пример изображения

1 Ответ

0 голосов
/ 01 декабря 2018 

var Main = {
    data() {
      return {
        form: [{
        id: 1,
        name: "one_hi_comed",
        time: "2018-11-27 00:00:00",
        info: [{
            type: "32",
            id: 33,
            msg: "hello",
            img_url: "http://sdfsdfsf.png"
        }, {
            type: "32",
            id: 33,
            msg: "hello",
            img_url: "http://sdfsdfsf.png"
        }, {
            type: "32",
            id: 33,
            msg: "hello",
            img_url: "http://sdfsdfsf.png"
        }]
      }, {
          id: 1,
          name: "online_hi_comed",
          time: "2018-11-27 00:00:00",
          info: [{
              type: "32",
              id: 33,
              msg: "hello",
              img_url: "http://sdfsdfsf.png"
          }, {
              type: "32",
              id: 33,
              msg: "hello",
              img_url: "http://sdfsdfsf.png"
          }, {
              type: "32",
              id: 33,
              msg: "hello",
              img_url: "http://sdfsdfsf.png"
          }]

      }]
      }
    },
    methods:{
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const arr = [4, 5, 6, 7] // 需要隐藏宽度的列的index
      if(columnIndex === 3) {
        return {
          rowspan: 1,
          colspan: 3
        }
      } else  if(arr.includes(columnIndex)){
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");

.el-table{
      td.sub_row {
        padding: 0;
        border-bottom: none;
        border-right: none;
        &>.cell {
          padding: 0;
        }
      }
    }
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
<template>
  <el-table
        :data="form"
        :span-method="objectSpanMethod"
        border>
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          prop="name"
          label="name">
        </el-table-column>
        <el-table-column
          prop="time"
          label="time">
        </el-table-column>
        <el-table-column
          prop="type"
          class-name="sub_row"
          label="type">
          <template slot-scope="scope">
            <el-table :data="scope.row.info" :show-header="false">
              <el-table-column
                prop="type">
              </el-table-column>
              <el-table-column
                prop="msg">
              </el-table-column>
              <el-table-column
                prop="img_url">
                <template slot-scope="scope">
                  <img :src="scope.row.img_url">
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="msg"
          label="msg">
        </el-table-column>
        <el-table-column
          prop="img_url"
          label="img">
        </el-table-column>
      </el-table>
</template>
</div>

Я решил, вот пример. пример в jsfiddl

код, подобный приведенному ниже: 

<template>
  <div>
    <el-table
      :data="form"
      :span-method="objectSpanMethod"
      border>
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="name">
      </el-table-column>
      <el-table-column
        prop="time"
        label="time">
      </el-table-column>
      <el-table-column
        prop="info"
        class-name="sub_row"
        label="info">
        <template slot-scope="scope">
          <el-table :data="scope.row.info" :show-header="false">
            <el-table-column
              prop="type">
            </el-table-column>
            <el-table-column
              prop="msg">
            </el-table-column>
            <el-table-column
              prop="img_url">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="type">
      </el-table-column>
      <el-table-column
        prop="msg"
        label="msg">
      </el-table-column>
      <el-table-column
        prop="img_url"
        label="img">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      form: [{
        id: 1,
        name: "one_hi_comed",
        time: "2018-11-27 00:00:00",
        info: [{
            type: "32",
            id: 33,
            msg: "hello",
            img_url: "http://sdfsdfsf.png"
        }, {
            type: "32",
            id: 33,
            msg: "hello",
            img_url: "http://sdfsdfsf.png"
        }, {
            type: "32",
            id: 33,
            msg: "hello",
            img_url: "http://sdfsdfsf.png"
        }]
      }, {
          id: 1,
          name: "online_hi_comed",
          time: "2018-11-27 00:00:00",
          info: [{
              type: "32",
              id: 33,
              msg: "hello",
              img_url: "http://sdfsdfsf.png"
          }, {
              type: "32",
              id: 33,
              msg: "hello",
              img_url: "http://sdfsdfsf.png"
          }, {
              type: "32",
              id: 33,
              msg: "hello",
              img_url: "http://sdfsdfsf.png"
          }]

      }]

    };
  },
  methods:{
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const arr = [4, 5, 6] // 需要隐藏宽度的列的index
      if(columnIndex === 3) {
        return {
          rowspan: 1,
          colspan: 3
        }
      } else  if(arr.includes(columnIndex)){
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-table{
  td.sub_row {
    padding: 0;
    border-bottom: none;
    border-right: none;
    &>.cell {
      padding: 0;
    }
  }
}
</style>

Идея решения этой проблемы состоит в том, чтобы сначала объединить ячейки, а затем использовать таблицу в таблице.столбец, который нужно разбить на несколько строк.

...