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