vue+element ui 封装table表格，支持自定义列

二次封装table表格，支持自定义列：即已封装好table表格，想要在引用页面增加自定义的表格列，从而达到像是在已有表格插入列。
自定义的操作列可以自己指定位置，如果要固定的话，就设置el-table-column组件的fixed属性即可。
封装如下：

1. 封装table表格

<el-table
      ref="listRef"
      :data="list"
      tooltip-effect="dark"
      :fit="true"
      border
    >
      <el-table-column type="selection" width="40" fixed="left" />
      <!-- 自定义列渲染 --!>
      <template v-for="(item) in columns">
        <slot v-if="item.slot" :name="item.slot" />
      </template>
      <el-table-column label="资产编号" align="center" min-width="180">
        <template slot-scope="scope">{{ scope.row.assetsNo }}</template>
      </el-table-column>
      <el-table-column label="资产名称" align="center" min-width="120">
        <template slot-scope="scope">{{ scope.row.assetsName }}</template>
      </el-table-column>
      <el-table-column label="资产类别" align="center">
        <template slot-scope="scope">{{ dictionary[scope.row.assetsType] }}</template>
      </el-table-column>
    </el-table>

<script>

export default {
  name: 'SimpleAssetList',
  props: {
    flist: {
      type: Array,
      default() {
        return []
      }
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      list: []
    }
  },
  watch: {
    flist: {
      immediate: true, // immediate选项可以开启首次赋值监听
      deep: true,
      handler(newValue, oldValue) {
        this.list = newValue
      }
    }
  },
  created() {},
  methods: {}
}
</script>

2. 引用并添加自定义列

<SimpleAssetList ref="selected" :flist="list" :columns="columns">
  <el-table-column v-if="!fid" slot="operate" label="操作" align="center" width="70" fixed="left">
    <template slot-scope="scope">
      <el-button v-waves type="success" icon="el-icon-check" size="mini" circle @click="checkOk(scope)" />
    </template>
  </el-table-column>
  <el-table-column slot="checkNo" label="计划编号" align="center" min-width="180">
    <template slot-scope="scope">{{ scope.row.checkNo }}</template>
  </el-table-column>
  <el-table-column slot="checkUserName" label="核查人" align="center">
    <template slot-scope="scope">{{ scope.row.checkUserName }}</template>
  </el-table-column>
</SimpleAssetList>

<script>
import SimpleAssetList from '@/views/common/assets/simpleList'
export default {
  name: 'BorrowCreate',
  components: { SimpleAssetList },
  data() {
    return {
      list: [],
      // 操作列
      columns: [
        { slot: 'operate' },
        { slot: 'checkNo' }
      ]
    }
  },
  methods: {
    },
  }
}
</script>