九月 2020 - SKILL.NULL

更多配置参考：https://vitejs.dev

vite.config.ts

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import { defineConfig } from "vite"

const fs = require("fs")

const path = require("path")

// Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中

const dotenv = require("dotenv")

const envFiles = [

/** default file */ `.env`,

/** mode file */ `.env.${process.env.NODE_ENV}`

]

for (const file of envFiles) {

const envConfig = dotenv.parse(fs.readFileSync(file))

for (const k in envConfig) {

process.env[k] = envConfig[k]

}

export default defineConfig({

define: {

'process.env': process.env

// 开发或生产环境服务的公共基础路径

base: './',

// 作为静态资源服务的文件夹

publicDir: 'assets',

plugins: [vue(), vueJsx()],

resolve: {

// 文件系统路径的别名

alias: {

'@': path.resolve(__dirname, 'src'),

'vue': 'vue/dist/vue.esm-bundler.js',

'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'

}

css: {

preprocessorOptions: {

scss: {

additionalData: '@import "./src/assets/style/index.scss";'

}

build: {

// 压缩

minify: process.env.VITE_NODE_ENV === 'production' ? 'esbuild' : false,

// 服务端渲染

ssr: false,

outDir: 'dist',

chunkSizeWarningLimit: 2000,

emptyOutDir: true,

rollupOptions: {

output: {

manualChunks(id) {

if (id.includes('node_modules')) {

return id.toString().split('node_modules/')[1].split('/')[0].toString()

}

server: {

host: process.env.VITE_HOST,

port: +process.env.VITE_PORT,

// 是否自动在浏览器打开

open: false,

hmr: true,

proxy: {

'/api': {

target: "http://127.0.0.1:99999",

changeOrigin: true

}

})

.env

# loaded in all cases

VITE_HOST = '0.0.0.0'

VITE_PORT = 8080

VITE_BASE_URL = './'

VITE_OUTPUT_DIR = 'dist'

&[……]

核心是使用v-if控制列的显隐

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<div>

<el-table

:data="item.data"

@filter-change="value => filterChange(value,index, 'tables')"

:span-method="value => cellMerge(value,'tables')"

:header-cell-style="{background:'#fbfbfb'}"

size="mini"

doLayout

border

<el-table-column

v-for="(ele,index) in item.columns"

:label="ele.text"

:prop="ele.value"

show-overflow-tooltip

v-if="ele.flag"

:key="ele.value + index"

:resizable="false"

<span>{{scope.row[scope.column.property]}}</span>

</template>

</el-table-column>

<el-table-column

:key="item.columns.length + 1"

fixed="right"

width="50"

v-if="item.stash_columns"

:filters="item.stash_columns"

:filtered-value="item.filter_value"

:resizable="false"

</template>

</el-table-column>

</el-table>

</div>

</template>

export default {

data () {

return {

tables: [

{

data: [],

columns: [

{

text: '滴滴',

value: 'didi',

flag: true

{

text: '哒哒',

value: 'dada',

flag: true

{

text: '嘿嘿',

value: 'heihei',

flag: true

{

text: '哈哈',

value: 'haha',

flag: false

}

]

}

]

}

methods: {

// 处理数据

handlerData (type) {

const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}]

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

this.$set(this[type][index], 'data', data)

this.$set(this[type][index], 'stash_columns', item.columns)

this.$set(this[type][index], 'filter_value', [])

const columns = item.stash_columns

const filter_value = item.filter_value

columns && columns.length > 0 && columns.map((ele, idx) => {

if (ele.flag) {

filter_value.push(ele.value)

}

})

this.$set(this[type][index], 'filter_value', filter_value)

})

// 控制列显隐

filterChange (value, idx, type) {

switch (type) {

case type:

for (const ele in value) {

this.$set(this[type][idx], 'show_columns', value[ele])

}

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

const columns = item.columns

const show_columns = item.show_columns

if (show_columns && show_columns.length > 0) {

columns && columns.length > 0 && columns.map((val, key) => {

this.$set(this[type][index].columns[key], 'flag', false)

show_columns.map((ele) => {

if (val.value === ele) {

this.$set(this[type][index].columns[key], 'flag', true)

}

})

}

})

break

default:

break

}

// 合并单元格

cellMerge ({row, column, rowIndex, columnIndex}, type) {

this.$nextTick(() => {

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

const show_columns = item.show_columns

const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length

if (columnIndex === length - 1) {

return [1, 0]

} else if (columnIndex === length) {

return [0, 0]

}

})

}

mounted () {

this.handlerData('tables')

}

</script>

月份：2020年9月

vite.config.ts基础配置分享

Parsing error: Imports within a `declare module` body must always be `import type` or `import typeof`

element-ui 表格控制列显隐简单方案

2020年九月
一	二	三	四	五	六	日
« 8月				1月 »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30