vue使用element ui的table实现Antd的table的效果

vue使用element ui实现Antd的table的效果

先附上一段代码吗

<el-row>
          <el-table :data="addgoods" max-height="300">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column
              v-for="(list, indexs) in comle"
              :key="indexs"
              :prop="list.prop"
              :label="list.label"
              :align="list.align"
              :width="list.width"
            >
              <template v-if="list.label == '下单价'" #default="{ row }">
                <el-input v-model="row.sell_price"></el-input>
              </template>
              <template v-else #default="{ row }">
                {{ row[list.prop] }}
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="" align="center" width="auto">
              <template #default="{ $index, row }">
                <el-button type="text" @click="deletetab($index, row)">
                  删 除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>


export default {
	data(){
 		return{
 		addgoods:[],
		comle: [
          {
            prop: 'goods_name',
            label: '商品名称',
            align: 'center',
            width: 'auto',
          },
          {
            prop: 'specs',
            label: '规格',
            align: 'center',
            width: 'auto',
          },
          {
            prop: 'goods_unit',
            label: '单位',
            align: 'center',
            width: 'auto',
          },
          {
            prop: 'sell_price',
            label: '下单价',
            align: 'center',
            width: 'auto',
          },
        ],
			}
		}
	}

其实原理很简单自我感觉主要是element ui没有提供像antd的table组件的slot插槽，导致很多人在用惯了antd后就感觉element ui很别扭一个<template></template>里面要写那么多东西言归正传说一下这个吧
element ui的table也是通过prop的字段名来找来渲染这个的所以要使用这个就知道怎么简单了就是这个prop字段要和数据源要渲染的字段保持一致就行了然后在<template></template>里面写要在那一个显示的内容通过v-if或v-show来判断显示不显示就可以了