el-table 纵向垂直表头 (二)

为表格每行添加一个按钮

这个表格依赖于 基础表格

数据没有任何变化，只是在每行添加了按钮

改变了的地方有如下几处

1. el-table-column 中添加组件渲染的方式

不再让 el-table-column 直接渲染显示数据了，使用我们的组件显示数据。如果传入是组件列，则使用相应的组件来展示内容。这里的 value-slots 可以自己替换为其他的组件

<el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
      >
        <template v-slot="scope">
          <template v-if="item === 'slots'">
            <value-slots :row="scope.row"></value-slots>
          </template>
          <template v-else>
            {{ scope.row[item] }}
          </template>
        </template>
      </el-table-column>

2. 添加一个用于显示按钮的插槽组件

添加了一个 value-slots 组件，用来渲染用户的操作按钮

  components: {
    ValueSlots: {
      functional: true,
      props: {
        row: Object,
      },
      render(createElement, context) {
        const {props = {}} = context
        const {row = {}} = props
        const {slots = ()=>{}} = row
        return slots(createElement, row)
      }
    }
  }

4. 数据中添加响应的字段用于循环渲染

头部数据中添加了 slots 字段。每列数据中添加我们自定义的 render

  computed: {
    getHeaders() {
      const headers = this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
      headers.push('slots') // 在最后一列添加按钮
      return headers
    },
    getValues() {
      const values = this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {
          'title': item.label,
          'slots': this.slots
        });
      })
      return values
    }
  },

5. 添加一个 render 函数用来写我们的操作按钮代码

  methods: {
    slots(h, row) {
      return ([
        <el-button>删除</el-button>,
        <el-button onClick={()=>this.click(row)}>查看</el-button>
      ])
    },
    click(row){
      console.log(row)
      alert('查看信息')
    }
  }

完整代码

HTML 段

<div class="element-main">
    <div> Element-ui 官方提供 table Demo</div>
    <el-table
      style="width: 100%"
      :data="tableData"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div>===================================== 分割线 =====================================</div>
    <div>行列转换后的 Demo</div>
    {{ getValues[0] }}
    <el-table
      :data="getValues"
      :show-header="false"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
      >
        <template v-slot="scope">
          <template v-if="item === 'slots'">
            <value-slots :row="scope.row"></value-slots>
          </template>
          <template v-else>
            {{ scope.row[item] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>

JS 段

components: {
    ValueSlots: {
      functional: true,
      props: {
        row: Object,
      },
      render(createElement, context) {
        const {props = {}} = context
        const {row = {}} = props
        const {slots = ()=>{}} = row
        return slots(createElement, row)
      }
    }
  },
  data() {
    return {
      headers: [
        {
          prop: 'date',
          label: '日期',
        },
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'address',
          label: '地址',
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
    }
  },
  computed: {
    getHeaders() {
      const headers = this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
      headers.push('slots') // 在最后一列添加按钮
      return headers
    },
    getValues() {
      const values = this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {
          'title': item.label,
          'slots': this.slots
        });
      })
      return values
    }
  },
  methods: {
    slots(h, row) {
      return ([
        <el-button>删除</el-button>,
        <el-button onClick={()=>this.click(row)}>查看</el-button>
      ])
    },
    click(row){
      console.log(row)
      alert('查看信息')
    }
  }