二次封裝table表格，支持自定義列：即已封裝好table表格凡蚜，想要在引用頁面增加自定義的表格列，從而達(dá)到像是在已有表格插入列豆同。
自定義的操作列可以自己指定位置番刊，如果要固定的話，就設(shè)置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="資產(chǎn)編號(hào)" align="center" min-width="180">
<template slot-scope="scope">{{ scope.row.assetsNo }}</template>
</el-table-column>
<el-table-column label="資產(chǎn)名稱" align="center" min-width="120">
<template slot-scope="scope">{{ scope.row.assetsName }}</template>
</el-table-column>
<el-table-column label="資產(chǎn)類別" 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選項(xiàng)可以開啟首次賦值監(jiān)聽
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="計(jì)劃編號(hào)" 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>